为什么 redux store 收不到来自 immer 的更新

Question

组合减速器

export default (injectedReducers = {}) => {
  return combineReducers({
    ...injectedReducers,
    memoizedStamps: memoizedStampsReducer, // <-- need to write here
  });
};

正在编写动作

const mapDispatch = (dispatch) => ({
  addStamp: (payload) =>
    dispatch({
      type: ADD_STAMP,
      payload,
    }),
});

编写reducer

export const initialState = [];

const memoizedStampsReducer = produce((draft, action) => {
  const { type, payload } = action;

  switch (type) {
    case ADD_STAMP:
      draft.push(payload);
  }
}, initialState);

export default memoizedStampsReducer;

在反应挂钩中使用

const useMemoizedStamps = () => {
  const [memStamps, dispatch] = useImmerReducer(reducer, initialState);
  const { addStamp } = mapDispatch(dispatch);

  useEffect(() => {
    addStamp({ body: 'body', coords: 'coords' });
  }, []);

  console.log(memStamps); // <-- gives [{ body: 'body', coords: 'coords' }] all good here
  
  return null;
};

export default useMemoizedStamps;

但它永远不会保存到注入的减速器“memoizedStamps”中。该数组始终为空。它与 connect(null, mapDispatchToProps) 完美配合，但不能在我的自定义挂钩中使用 connect()。

我做错了什么？这里的答案是什么？

--- 更新 1 --- @phry，像这样吗？

const useMemoizedStamps = (response = null, error = null) => {
  const dispatch = useDispatch();
  const [memStamps] = useImmerReducer(reducer, initialState);
  const { addStamp } = mapDispatch(dispatch);

  useEffect(() => {
    addStamp({ body: 'body', coords: 'coords' });
  }, []);

  console.log(memStamps);

  return null;
};

现在如果我需要它们是本地的，我需要使用 immer 的调度程序吗？有什么办法可以合并这两个调度程序吗？ P.S。这个调度员真的把它保存到全局状态。

Answer 1

重读一遍，我想你只是误会了。

东西永远不会“保存到减速器中”。 reducer 只管理状态如何变化。

在 Redux 中，它将“保存到商店中”，但为此您必须实际使用商店。 useImmerReducer 与 Redux 无关——它只是 useReducer 的一个版本，它像 useState 一样只是使用 reducer 管理孤立的 component-local 状态。此状态不会与其他组件共享。

如果你想使用 Redux（并与 immer 一起使用），请查看官方的 Redux Toolkit，它已经集成了 immer。由the official Redux tutorial.

教授

为什么 redux store 收不到来自 immer 的更新

Why redux store doesn't receive an update from immer

redux

immer.js

react-hooks