Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It provides utilities to simplify common Redux use cases, such as store setup, reducer creation, and asynchronous logic handling.
Redux Toolkit includes various functions and utilities to streamline Redux development, such as configureStore, createSlice
, createAsyncThunk
, and createEntityAdapter
.
configureStore
is a function provided by Redux Toolkit to set up a Redux store with sensible defaults and additional middleware.
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
reducer: rootReducer,
devTools: process.env.NODE_ENV !== 'production'
});
export default store;
Provider
access the Redux store through a React Application
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
createSlice
to create Redux state slices with reducers and action creators.
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
},
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
useDispatch
for accessing the dispatch function
import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
const Counter = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
useSelector
for accessing the Redux store state
import React from 'react';
import { useSelector } from 'react-redux';
const CounterDisplay = () => {
const count = useSelector(state => state.counter.value);
return <div>Count: {count}</div>;
};
export default CounterDisplay;
generates async action creator
take action type string as a token
it generates three action types a pending, a fulfilled, and a rejected action type.
an async function as the second argument to createAsyncThunk
for asynchronous operation. you can dispatch actions, perform async operations (like API calls), and handle any errors that may occur.
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUser } from '../api/userAPI';
export const fetchUserById = createAsyncThunk(
'users/fetchByIdStatus',
async (userId, thunkAPI) => {
const response = await fetchUser(userId);
return response.data;
}
);
const userSlice = createSlice({
name: 'user',
initialState: {
data: {},
status: 'idle',
},
reducers: {},
extraReducers: builder => {
builder
.addCase(fetchUserById.pending, state => {
state.status = 'loading';
})
.addCase(fetchUserById.fulfilled, (state, action) => {
state.status = 'succeeded';
state.data = action.payload;
})
.addCase(fetchUserById.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
},
});
export default userSlice.reducer;