How can I access state of another slice in redux with redux- toolkit ?

When using Redux Toolkit, if you need to access the state of another slice within a slice, the common approach is to utilize the thunkAPI parameter when creating an async thunk. thunkAPI provides the getState method, which can be used to retrieve the entire Redux store state. This approach is particularly suitable for handling complex application logic, especially when different data fragments are managed in separate slices.

Example:

Assume we have two slices: userSlice and settingsSlice. We need to access the current settings information during an asynchronous operation for user information. The implementation can be as follows:

1. Define 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. Define userSlice and access the state of settingsSlice within a thunk:

   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(`Current theme setting: ${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;

In this example, we access the entire Redux store state via thunkAPI.getState() within the fetchUser thunk and extract the state of the settings slice. This allows us to customize our request logic based on user settings (e.g., theme color).

Note:

This approach effectively enables sharing and accessing data across different slices, but it is important to manage state dependencies carefully to avoid overly complex interaction logic and hard-to-maintain code. When designing the application's state structure, strive to keep states independent and clear for easier management and maintenance.