Question

说我有一个跟踪大学课程的应用程序。每个课程都有一些属性，例如name time notes id。在应用程序中，用户可以添加/删除课程并编辑其属性。我将如何为此构建一个redux存储？

我的第一个想法是使状态成为映射对象，如下所示：

interface Course {
  id: string;
  name: string;
  time: string;
  notes: string;
}

interface StoreState {
  [id: string]: Course;
}

其中状态中的每个条目对应于一个课程实例。然后，当用户添加新课程时，我向状态添加了新条目

const slice = createSlice({
  name: 'courses',
  initialState: {},
  reducers: {
    addCourse: (state, action) => {
      state[action.payload.id] = {
        id: action.payload.id,
        name: action.payload.name,
        ...
        ...
      }
    },
    updateNotes: (state, action) => {
      state[action.payload.id].notes = action.payload.notes
    }
    ...
    ...
  }
})

这不是理想的，因为在每种情况下，我都必须冗余使用课程id来更新正确的课程。我想在商店中为每个课程设置一个状态对象，并编写这样的大小写减少器：

    updateNotes: (state, action) => {
      state.notes = action.payload.notes
    }

我不必担心我要更新哪个课程，因为它们的功能都相同。有没有一种方法可以为每门课程动态创建共享相同简化器逻辑的状态？

Answer 1

您需要实现redux的CombineReducers（）的动态版本。

似乎有一个软件包可以执行此操作：https://www.npmjs.com/package/redux-injector

Answer 2

考虑到这一点，我认为您所关心的最终是一个数据结构，其中ID既是存储数据中的键又是属性，这打破了Redux中的数据存储应为最小数据集，无需重复。

解决方案是仅将ID存储为密钥，并在从商店中获取密钥时使用名为Reselect的库将密钥合并回数据中。

https://github.com/reduxjs/reselect

如何为相同数据类型的多个实例重用Redux reducer逻辑？

2 个答案: