Question

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

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

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

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

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

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

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

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

我是对的吗？

Answer 1

我认为“loading”或“error”等数据不属于全局数据存储，而应该保留为本地组件状态。它不是持久性的，其他组件也不应该需要它。我可能放在全局数据存储中的唯一一件事就是用户实体本身，因为其他组件可能会访问它。

Answer 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

希望这有帮助。

Answer 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;

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

混淆反应redux reducer状态设计

3 个答案: