Question

我是 redux 的新手，我正在通过创建主题切换器和计数器来测试它。

问题是每次我单击以递增计数器时都可以正常工作，但是当我尝试切换黑暗主题时，计数会重置为 0，反之亦然。我使用的 combineReducers 包含 themeReducer 和 counterReducer。

为什么计数器会在状态改变时重置？我做错了什么？

这是一些代码：

操作：

 export function increment() {
  return {
    type: 'INCREMENT',
  };
}

export function decrement() {
  return {
    type: 'DECREMENT',
  };
}

//different file
    export function darkTheme() {
      return {
        type: 'DARK',
      };
    }

减速器：

export default function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return 0;
  }
}

//different file
export default function themeReducer(state = false, action) {
  switch (action.type) {
    case 'DARK':
      return !state;
    default:
      return false;
  }
}

我这样称呼它：

 const dispatch = useDispatch();
   <button onClick={() => dispatch(increment())}> +</button>

Answer 1

在默认情况下，您必须总是返回 state，在两个减速器中：每个减速器将始终在每个操作中被调用，因此它们不必对现有状态进行修改在默认情况下。

说了这么多，我想让你知道你正在学习“vanilla redux”，这不再是推荐用于生产的 redux 风格。因此，虽然了解底层概念很好，但您最终不应该真正编写这样的代码。请按照 the official redux tutorials 了解如何编写现代 redux。（基础教程将让你从你现在使用的风格开始，然后进入更现代的领域，基础教程将直接从现代 redux 开始——这两种方式都适用于学习 redux）

Redux 状态正在被其他状态更改覆盖

1 个答案: