如何使用Redux-toolkit向前端添加数据

How to add data to the front with Redux-toolkit

环境

反应本机https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz
redux 工具包 1.4.0

代码

有像 Slice 这样的代码,顺便说一句,我正在创建聊天应用程序。
(在消息页面,向上滚动并像普通聊天应用一样获取旧消息)

export const messageSlice = createSlice({
  name: key,
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // fetch messages by ajax
      .addCase(fetchMessages.fulfilled, (state, action) => {
        adapter.addMany(state, action.payload.messages);
      })
  },
});

现在如果有数据 [4,5,6] 并从服务器 [1,2,3] 获取消息数据。使用 "addMany()".

结果将是 [4,5,6,1,2,3]

还有其他方法可以使用redux工具包的方法将数据变成[1,2,3,4,5,6]吗? 或者如果你只是知道其他方法,即使它不是 redux 工具包的方法,请记下来。

通常,entityAdapter 不关心顺序 - 所以一切都只是在最后添加。您可以使用 sortComparer 来保持 ID 排序。

const itemsAdapter = createEntityAdapter({
  selectId: (item) => item.id,
  sortComparer: (a, b) => a.id-b.id,
})