In Redux Toolkit, you can get state from one slice to another using the useSelector hook provided by the react-redux library. The useSelector hook allows you to extract data from the Redux store by selecting a specific slice of the state.

Here's how you can use useSelector to access state from one slice to another:

  1. Install the required dependencies: Make sure you have the necessary packages installed in your project.
npm install @reduxjs/toolkit react-redux
  1. Set up your Redux store using createSlice from Redux Toolkit:

Assuming you already have a Redux store set up using Redux Toolkit, define your slices with their reducers.

// src/features/slice1.js import { createSlice } from '@reduxjs/toolkit'; const slice1 = createSlice({ name: 'slice1', initialState: { data1: null, }, reducers: { setData1: (state, action) => { state.data1 = action.payload; }, }, }); export const { setData1 } = slice1.actions; export default slice1.reducer;
// src/features/slice2.js import { createSlice } from '@reduxjs/toolkit'; const slice2 = createSlice({ name: 'slice2', initialState: { data2: null, }, reducers: { setData2: (state, action) => { state.data2 = action.payload; }, }, }); export const { setData2 } = slice2.actions; export default slice2.reducer;
  1. Combine reducers and create the store:
// src/store.js import { configureStore } from '@reduxjs/toolkit'; import slice1Reducer from './features/slice1'; import slice2Reducer from './features/slice2'; const store = configureStore({ reducer: { slice1: slice1Reducer, slice2: slice2Reducer, }, }); export default store;
  1. Use useSelector to access state from one slice to another:

In your React components, you can use the useSelector hook to access state from different slices.

import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { setData1 } from './features/slice1'; import { setData2 } from './features/slice2'; const ExampleComponent = () => { const data1 = useSelector((state) => state.slice1.data1); const data2 = useSelector((state) => state.slice2.data2); const dispatch = useDispatch(); const handleSetData = () => { // Dispatch actions to set data in each slice dispatch(setData1('Some data for slice1')); dispatch(setData2('Some data for slice2')); }; return ( <div> <p>Data from slice1: {data1}</p> <p>Data from slice2: {data2}</p> <button onClick={handleSetData}>Set Data</button> </div> ); }; export default ExampleComponent;

In this example, useSelector is used to access the data1 and data2 from slice1 and slice2, respectively. When you click the "Set Data" button, the handleSetData function dispatches actions to set data in each slice, and you'll see the updated data displayed on the screen.

Remember that the useSelector hook should be used within a component that is a child of the <Provider> component to access the Redux store. The <Provider> component makes the Redux store available to all its child components. Make sure you wrap your application with the <Provider> component in your root file (e.g., index.js or App.js):

import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; const Root = () => ( <Provider store={store}> <App /> </Provider> ); export default Root;

With this setup, you can access state from one slice to another using useSelector and manage your application's state efficiently with Redux Toolkit.

Have questions or queries?
Get in Touch