redux-toolkit 操作未在 reducer 中触发答案

【问题标题】：redux-toolkit action not triggered in reducerredux-toolkit 操作未在 reducer 中触发
【发布时间】：2023-03-03 06:28:19
【问题描述】：

我正在尝试使用 @reduxjs/Toolkit 触发一个简单的操作，但它不起作用。

我看到该操作已调度，但就像切片缩减器没有在听它或其他什么。

const say = createAction("ui/say", what => ({ payload: what }));

const uiSlice = createSlice({
  name: "ui",
  initialState: { said: "" },
  reducers: {
    [say.type]: (state, action) => {
      console.log("saying", action.payload); //<-- not showing, why?
      state.currentList = action.payload;
    }
  }
});

const store = configureStore({
  reducer: combineReducers({
    ui: uiSlice.reducer
  })
});

const Chat = () => {
  const dispatch = useDispatch();
  const [whatToSay, setWhatToSay] = useState("");
  const whatWasSaid = useSelector(state => state.ui.said);

  const onSubmit = e => {
    e.preventDefault();
    dispatch(say(whatToSay));
    setWhatToSay("");
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="text" onChange={e => setWhatToSay(e.target.value)} />
        <button>Say</button>
      </form>
      {whatWasSaid ? <p>You said: {whatWasSaid}</p> : <p>Say something</p>}
    </div>
  );
};

这是一个最小的复制示例： https://codesandbox.io/s/redux-toolkit-0tzxs?file=/src/index.js

【问题讨论】：

标签： javascript reactjs redux redux-toolkit

【解决方案1】：

我认为您与 createSlice API 不匹配。

从您的代码中，您尝试为某个操作实现侦听器，因此您可能希望改用 extraReducers：

const uiSlice = createSlice({
  name: "ui",
  initialState: { said: "" },
  // Not reducers: {}
  extraReducers: {
    [say.type]: (state, action) => {
      console.log("saying", action.payload);
      state.currentList = action.payload;
    }
  }
});

注意createSlice API 的reducers 属性：

reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>

如果你想在reducers 中使用say，它应该是：

const say = (state, payload) => {
  console.log("saying", payload);
  state.currentList = payload;
};


const uiSlice = createSlice({
  name: "ui",
  initialState: { said: "" },
  reducers: { say }
});

// Usage
dispatch(uiSlice.actions.say(whatToSay));

@markerikson：使用createSlice，reducers 字段用于定义reducer 并生成与这些reducer 匹配的操作。 extraReducers 字段用于处理已在别处定义的操作。

【讨论】：

我认为 extraReducers 只是用于处理异步操作（来自文档）。现在我很困惑：为什么有两种类型，我们什么时候应该使用它们？此外，reducers: { say } 将如何工作，因为 say 是一个动作创建者？我们如何设置上述状态字段？
对于异步操作，您使用createAsyncThunk API，extraReducers 用于制作reducer，但这取决于其他操作而不是切片，在本例中使用say行动有没有用。文档中有很多示例，无法更好地解释
你问的很好而且问题很多，所以请为它打开新线程，我回答了原来的问题，我们应该专注于此。
是的，你是对的，{say} 应该来自createReducer，我的错。
进一步扩展：createSlice，reducers 字段用于定义减速器并生成与这些减速器匹配的操作。 extraReducers 字段用于处理已在别处定义的操作。