Scribd
Upload
57 views2 pages

Redux Toolkit Setup Guide

The document outlines steps for configuring a Redux store and creating a profile slice to manage state in a React application. Step 1 involves installing Redux and React Redux packages. Step 2 covers configuring a Redux store and creating a profile state slice. Step 3 dispatches an action from login to update the profile slice. Step 4 uses the store data in the home screen with the useSelector hook.

Uploaded by

BALIP AAYUSH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
57 views2 pages

Redux Toolkit Setup Guide

The document outlines steps for configuring a Redux store and creating a profile slice to manage state in a React application. Step 1 involves installing Redux and React Redux packages. Step 2 covers configuring a Redux store and creating a profile state slice. Step 3 dispatches an action from login to update the profile slice. Step 4 uses the store data in the home screen with the useSelector hook.

Uploaded by

BALIP AAYUSH
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Step 1 : Package installation

https://redux-toolkit.js.org/introduction/getting-started
npm install @reduxjs/toolkit
npm install react-redux

Step 2 : Configuring store & creating a profile slice

https://redux-toolkit.js.org/tutorials/quick-start
https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-store
https://redux-toolkit.js.org/tutorials/quick-start#provide-the-redux-store-to-react
https://redux-toolkit.js.org/tutorials/quick-start#create-a-redux-state-slice

Step 3 : call profile slice action using dispatch hook from login

Step 4 : use data update in the store from home screen using useSelector hook

Hooks.ts

import {TypedUseSelectorHook, useDispatch, useSelector} from 'react-redux';

import type {AppDispatch, RootState} from './index';

export const useAppDispatch = () => useDispatch<AppDispatch>();


export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Store.ts

import {
configureStore,
combineReducers,
CombinedState,
AnyAction,
} from '@reduxjs/toolkit';
import ProfileSlice from './slice/ProfileSlice';

const combinedReducer = combineReducers({


profile: ProfileSlice,
});

const rootReducer = (state: CombinedState<any>, action: AnyAction) => {


if (action.type === 'RESET') {
state = undefined;
}
return combinedReducer(state, action);
};

export const store = configureStore({


reducer: rootReducer,
});

export type RootState = ReturnType<typeof store.getState>;


export type AppDispatch = typeof store.dispatch;

You might also like