对 react redux 减速器状态设计感到困惑答案

【问题标题】：Confuse about react redux reducer state design对 react redux 减速器状态设计感到困惑
【发布时间】：2018-04-28 06:28:10
【问题描述】：

例如，我有一个 reducer 来操作用户状态，例如创建用户、编辑、获取用户。

我应该为每个动作创建状态吗，例如：

{
  loadingForFetching: false,
  fetchingResult: null,
  fetchingError: '',

  loadingForEditing: false,
  editingResult: null,
  editingError:'',

  loadingForCreating: false,
  creatingResult: null,
  creatingError: ''
}

或者让三个动作共享同一个状态：

{
   loading: false,
   result: null,
   error: ''
}

我认为共享一个是个坏主意，因为当同时获取和创建用户时，如果一个动作完成了，通过将加载设置为false，它可能会误导另一个动作也完成了。不过用例很少，可能是我太担心了

我说的对吗？

【问题讨论】：

“结果”字段除了null还包含什么？
@MattiVirkkunen 可能是获取结果；或创建请求响应
“抓取结果”和用户实体本身有区别吗？
@MattiVirkkunen no
在这种情况下，我认为您的fetchingResult 应该被称为users 并且是一个数组。

标签： reactjs redux react-redux

【解决方案1】：

我不认为像“加载”或“错误”这样的数据属于全局数据存储，而应该作为本地组件状态保存。它不是持久的，其他组件也不应该需要它。我可能会放入全局数据存储中的唯一内容是用户实体本身，因为它可能会被其他组件访问。

【讨论】：

我同意你的看法。但是我阅读的每个 redux 教程似乎都将这三样东西都放在了 reducer 状态。是否有其他教程实现了您描述的方式？
@hh54188 我不知道有什么好的教程，但我认为只要稍微考虑一下，就很容易决定什么状态需要在所有东西之间共享，什么不需要。
我不同意。 React 组件都是关于显示的，而不是数据管理。这就是 Redux 的全部意义——将它们分开。组件用于显示，数据进入存储，容器组件将数据从存储映射到视图组件所需的格式。如果您将状态数据保存在组件中，则不需要 Redux。

【解决方案2】：

它是数据结构方面的。到目前为止，我使用

{
  targetState: {
    data: [{id: 1...}, {id: 2} ... ],
    loading: false,
    loaded: false,
    error: null,
    ... // you could put more information if you like, such activeTarget etc
  }
}

如果那里有更多的嵌套数据，需要考虑规范化状态形状。 https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

希望这会有所帮助。

【讨论】：

【解决方案3】：

如果你想在你的状态下保持加载状态，那么你最好使用计数器模式，而不是真/假标志。

const loadingReducer = (state = 0, action) => {
    if (action.type === 'LOADING_FOR_EDITING' ||
        action.type === 'LOADING_FOR_CREATING' ||
        ...) {
        return state + 1;
    }
    if (action.type === 'LOADING_FOR_EDITING_SUCCESS' ||
        action.type === 'LOADING_FOR_CREATING_SUCCESS' ||
        ...) {
        return state - 1;
    }
    return state;
};

// root reducer:
export default combineReducers({
     loading: loadingReducer,
     loadedData: loadedDataReducer,
     // ...etc
});

现在您可以在您的组件中检查加载状态，例如const isLoaded = state.loading === 0;

这种方法允许您控制多个异步请求。

【讨论】：