Ultimate Guide for redux toolkit
REDUX TOOL KIT ULTIMATE GUIDE
Installation --->
- yarn add @reduxjs/toolkit
- yarn add react-redux
src --- store --- index / store [File] --- create a store file
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Inside the Slice file
1. Import createSlice and store the function into a variable,
this createSlice function takes one object
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({});
2. Inside the object it takes 3 objects -- name, initialState, reducers
make sure the spelling is correct and export correctly
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: [],
reducers: {},
});
export default userSlice.reducer;
3. Inside the reducers object it takes functions, the functions inside the reducers take 2 parameters -- state, action
*** Please do not forget to export the functions
export const { fun1, fun2, fun3 } = sliceName.actions
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: [],
reducers: {
addUser(state, action) {
state.push(action.payload);
console.log(action.payload)
},
removeUser(state, action) {
state.splice(action.payload,1)
},
deleteAllUsers(state, action) {
return []
},
},
});
export const { addUser, removeUser, deleteAllUsers } = userSlice.actions;
export default userSlice.reducer;
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Inside the Store file
4. In the store file import configureStore and the previously created slice file, configure store function takes one object and inside the object their is a reducer object where we can store our slice files with key-value pair
*** Note that do not use { userSlice } if the slice export default just use without curly braces
import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./slices/UserSlice";
const store = configureStore({
reducer: {
users: userSlice,
}
});
export default store;
Now we are ready to send and receive the data
- useDispatch() ----- to send the data
- useSelector() ----- to received the data
5. Using useDispatch() function we can send the data and store into a state inside the slice -- reducers -- function
To achieved that we have to import the function from slice
and simply send the data to the state by putting the data inside the function
import { useDispatch } from 'react-redux';
import { addUser } from '@/store/slices/UserSlice';
const dispatch = useDispatch();
const handleSubmit = () => {
dispatch(addUser("Send data to the state"))
}
5. We can see the sended data from slice inside the action.payload
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: [],
reducers: {
addUser(state, action) {
state.push(action.payload);
console.log(action.payload) //// To See the data
},
},
});
export const { addUser } = userSlice.actions;
export default userSlice.reducer;
6. To received the datainto other component we can use useSelector()
import { useSelector } from 'react-redux';
const data = useSelector((state)=> {
return state.store1 /// this name come from the store
})
import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./slices/UserSlice";
const store = configureStore({
reducer: {
store1: userSlice,
/// Inside the reducer we can import
multiple slices with a unique name
}
});
export default store;
That is all about Basic of redux tool kit
Basically our sent data goes to state and using multiple function we can modify the state
import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user",
initialState: [],
reducers: {
addUser(state, action) {
state.push(action.payload);
console.log(action.payload)
}, // to add data into the state
removeUser(state, action) {
state.splice(action.payload,1)
}, // to remove the item with their id
deleteAllUsers(state, action) {
return []
}, // to clear the state
},
});
export const { addUser, removeUser, deleteAllUsers } = userSlice.actions;
export default userSlice.reducer;
/// Using this we can identify each item with id
const handelDelet =(id)=>{
dispatch(removeUser(id))
}
sdfghjjjjjjjsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
Comments
Post a Comment