reactjs - 创建操作以更改状态中的键时，Redux 操作和减速器的奇怪行为

Question

我为标题道歉。

无论如何，当我创建某种类型的操作时，我在 Redux 开发工具中看到了奇怪的行为。显示我的意思的唯一方法是通过一个例子。

假设我有一个具有这种结构的状态：

const INITIAL_STATE = {
isFile: false,
isUploaded: false,
isUser: true
};

由于状态内只有键没有嵌套对象，我想我可以只创建一个操作来更改所有键，而不是为每个特定键执行不同的操作。

所以reducer变成了：

const CHANGE_KEY = "CHANGE_KEY";

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CHANGE_KEY:
      return {
        ...state,
        [action.payload.key]: action.payload.value,
      };
    default:
      return state;
  }
};

const changeKeyInState = (key, value) => ({ type: CHANGE_KEY, payload: { key, value } });

现在所有这些都有效。所以我可以调用一个动作来改变状态中的简单键值对。但是，假设我有不同的 reducer，它们通过自己的 key 更改操作来处理状态的不同区域。当我查看 Redux 开发工具时，它会显示添加到不应该存在的状态的键，这没有意义。例如，如果我有一个用于登录的减速器，该减速器具有更改isLoggedIn密钥的操作，则该密钥也会添加到上述减速器中，这没有任何意义。

这是不同减速器的代码：

const CHANGE_LOGIN_KEY = "CHANGE_LOGIN_KEY";

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CHANGE_LOGIN_KEY:
      return {
        ...state,
        [action.payload.key]: action.payload.value,
      };
    default:
      return state;
  }
};

const changeKeyInLoginState = (key, value) => ({ type: CHANGE_LOGIN_KEY, payload: { key, value } });

我只在 Redux 开发工具中看到这一点。我不知道发生了什么事。谁能帮我弄清楚问题是什么？

标签： reactjsredux