Redux 工具包 - 更新对象中的键值

Question

我需要一些帮助来修改我的减速器。我正在使用 Redux Toolkit，并且在其中一个状态切片中我有一个带有一些分组设置的对象：

initialState: {
    ...
    userSettings: {mode: 2, subscription: false, setting3: 'text', setting4: 'another text'},
    ...
}

我的减速器是：

setUserSettings: (state, action) => {
    state.userSettings: action.payload
}

在组件的不同部分，我会更新 userSettings 对象中的各个设置：

dispatch(setUserSettings({ mode: 4 }))

在另一个地方：

dispatch(setUserSettings({ setting3: 'some other text'})

我该如何修改减速器才能做到这一点？谢谢

Answer 1

由于RTK底层使用immer库，因此您可以通过直接分配来改变状态。请参阅更改和返回状态

import { configureStore, createSlice } from '@reduxjs/toolkit';

const settingsSlice = createSlice({
  name: 'settings',
  initialState: {
    otherSettings: { ok: true },
    userSettings: { mode: 2, subscription: false, setting3: 'text', setting4: 'another text' },
  },
  reducers: {
    setUserSettings: (state, action) => {
      state.userSettings = { ...state.userSettings, ...action.payload };
    },
  },
});
const { setUserSettings } = settingsSlice.actions;

const store = configureStore({ reducer: settingsSlice.reducer });

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(setUserSettings({ mode: 4 }));
store.dispatch(setUserSettings({ setting3: 'some other text' }));

输出：

{
  otherSettings: { ok: true },
  userSettings: {
    mode: 4,
    subscription: false,
    setting3: 'text',
    setting4: 'another text'
  }
}
{
  otherSettings: { ok: true },
  userSettings: {
    mode: 4,
    subscription: false,
    setting3: 'some other text',
    setting4: 'another text'
  }
}