3

假设我有一个跟踪大学课程的应用程序。每门课程都有一些属性，例如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
    }

我不必担心我正在更新哪个课程，因为它们的功能都相同。有没有办法为共享相同 reducer 逻辑的每门课程动态创建状态？

4

2 回答 2

2

你需要实现 redux 的 combineReducers() 的动态版本。

似乎有一个包可以做到这一点：https ://www.npmjs.com/package/redux-injector

于 2020-07-09T03:08:37.160 回答
0

看着这个，我认为您关心的是最终得到一个数据结构，其中ID存储数据中既是键又是属性，这打破了 Redux 中的数据存储应该是最小数据集而没有任何重复的想法。

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

https://github.com/reduxjs/reselect

于 2020-07-19T08:35:21.510 回答