使用 redux 工具包替换多个切片的状态

Question

如何使用 redux 工具包在 React 中将由多个切片组成的存储状态替换为其他新状态？

您可以使用extraReducers将整个存储恢复到其初始状态：是否可以使用相同的机制将存储状态更改为初始状态以外的其他状态？

例如，你会有这样的东西：

const aSlice = createSlice({ 
  name: 'a', 
  initialState: {a: 1}, 
  reducers: {
    someReducer(state, action) {...}
  }
})
const bSlice = createSlice({ 
  name: 'b', 
  initialState: {b: 'foo'}, 
  reducers: {}
})

const store = configureStore({
  reducer: {
    aReducer: aSlice.reducer,
    bReducer: bSlice.reducer,
  }
});

export type RootState = ReturnType<typeof store.getState>

在 React 组件中，您可以使用以下方法更新状态：

const dispatch = useDispatch();
dispatch(someReducer({...}));

如何用这样的内容替换整个商店的状态：

{
  "aReducer": {"a": 2},
  "bReducer": {"b": "bar"},
}

Answer 1

正如 dermeck 所建议的，您确实可以使用类型extraReducers 安全。

一个最小的例子是：

import {combineReducers, configureStore, createAction, createSlice, PayloadAction} from "@reduxjs/toolkit";

export const replaceWith = createAction<RootState>('REPLACE_WITH');


const initialState: { a: number } = {
  a: 0
}

export const aSlice = createSlice({
  name: 'a-slice',
  initialState,
  reducers: {
    reduce(state, action: PayloadAction<number>) {
      return {a: action.payload}
    }
  },
  extraReducers: (builder) => {
    builder.addCase(replaceWith, (_, action) => {
      return {
        ...action.payload.aReducer,
      };
    });
  },
});

export const bSlice = createSlice({
  name: 'b-slice',
  initialState: {},
  reducers: {/* TODO */},
  extraReducers: (builder) => {/* TODO */},
});

const rootReducer = combineReducers({
  aReducer: aSlice.reducer,
  bReducer: bSlice.reducer
});

const store = configureStore({
  reducer: rootReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

最后，在 React 组件中，您可以执行以下操作：

const dispatch = useDispatch();
dispatch(replaceWith(newState));

Answer 2

根据定义，Reducer 只能访问它们拥有的状态部分。因此，如果我有 {users: usersReducer, posts: postsReducer}，则 usersReducer 根本无法访问 posts 状态切片。如何使用 redux-toolkit 访问 redux 中另一个切片的状态？。

因此，您必须分派两个切片的两个操作，并且每个单独的减速器将单独更新其状态。