使用 redux - toolkit 如何访问 redux 中另一个切片的状态？

在使用 Redux Toolkit 时，如果需要在一个 slice 中访问另一个 slice 的状态，通常的做法是在创建异步 thunk 时利用 thunkAPI 参数。thunkAPI 提供了 getState 方法，可以用来获取整个 Redux store 的状态。这种方式非常适合在处理复杂的应用逻辑，特别是当不同的数据片段在不同的 slice 中管理时。

示例:

假设我们有两个 slices：userSlice 和 settingsSlice。我们需要在处理用户信息的异步操作中访问当前的设置信息。具体的实现可以如下：

1. 定义 settingsSlice:

   javascript
   import { createSlice } from '@reduxjs/toolkit';
   
   export const settingsSlice = createSlice({
     name: 'settings',
     initialState: {
       theme: 'dark',
     },
     reducers: {
       setTheme: (state, action) => {
         state.theme = action.payload;
       },
     },
   });
   
   export const { setTheme } = settingsSlice.actions;
   export default settingsSlice.reducer;

2. 定义 userSlice 并在一个 thunk 中访问 settingsSlice 的状态:

   javascript
   import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
   
   export const fetchUser = createAsyncThunk(
     'user/fetchUser',
     async (userId, thunkAPI) => {
       const state = thunkAPI.getState();
       const { theme } = state.settings;
   
       console.log(`当前主题设置: ${theme}`);
       const response = await fetch(`/api/users/${userId}?theme=${theme}`);
       return response.json();
     }
   );
   
   export const userSlice = createSlice({
     name: 'user',
     initialState: {
       user: null,
       status: 'idle',
     },
     reducers: {},
     extraReducers: (builder) => {
       builder.addCase(fetchUser.fulfilled, (state, action) => {
         state.user = action.payload;
       });
     }
   });
   
   export default userSlice.reducer;

在这个例子中，我们在 fetchUser 这个 thunk 中通过 thunkAPI.getState() 获取了整个 Redux store 的状态，并从中提取出 settings slice 的状态。这允许我们根据用户的设置信息（如主题颜色）来定制我们的请求逻辑。

注意：

这种方法可以有效地在不同 slices 间共享和访问数据，但需要注意管理好状态的依赖关系，避免造成过于复杂的交互逻辑和难以维护的代码。在设计应用的状态结构时，尽量保持状态的独立和清晰，以便于管理和维护。