Question

想象一下，你有2个组件：TasksList和OverdueTasksList。任务数量很大，因此您无法使用1个网络请求加载所有任务。这意味着他们都需要单独获取数据。

在这种情况下，使用Redux组织数据的最佳方法是什么？

这是我的想法：

{
  tasks: {
    t1: {
      id: "t1",
      name: "Task 1",
    },

    // ...

  },

  tasksList: {
    isFetching: false,
    error: null,
    tasks: ["t1", ...]
  },

  overdueTasksList: {
    isFetching: false,
    error: null,
    tasks: ["t5", ...]
  }
}

这样，如果您从一个组件编辑任务对象，它也将反映在另一个组件中。

我不喜欢这种模式的是你必须为每个获取数据的组件创建一个新的reducer。

Answer 1

你有没有过期＆＃39;作为任务的财产而不是？因此，您可以将2个减速器合并为一个：

const initialState = [];
tasks: function(state = initialState, action){
    switch(action.type){
         case receiveOverduetask:
             return [...state, action.overdueTask];
         case receiveTask:
             return [...state, action.task];
         default:
             return state;
    }
}

您仍然可以拥有2个单独的请求，只需确保它们相应地设置了过期属性。

是为每个组件创建一个减少器来获取一个好的模式吗？

1 个答案: