under the hood createSlice - under the hood uses the immer library. - to directly mutate the state. { state.numOfCakes-- //this is mutation, no care on rest of other props } new way: (file name should be of suffix: 'Slice') - also group together the reducer logic & actions for a single feature in a single file. - The entire application state is split into slices & managed individually. const createSlice = require('@reduxjs/toolkit').createSlice const initialState = { numOfCakes: 10 } const cakeSlice = createSlice ({ name: 'cake', initialState, //if both key & value are same, its better to write just once, //initialState: initialState, reducers: { // we specify the individual state transitions. value is object //eg: we have 2 keys 'ordered' & 'restocked' ordered: (state, action) => { //value is an arrow function //but for our example 1 parameter is enough, as just decreasing by 1. //1. we dont have to explicitly return new state //2. we can directly mutate the new state (wait what!!!! yes - createSlice - under the hood uses the immer library. state.numOfCakes-- //this is mutation, no care on rest of other props }, restocked: (state, action) => { state.numOfCakes += action.payload }, }, }) // what about the actions? //3. createSlice - will automatically generate action creators with same name as reducer functions //4. it also returns the main reducer function we can provide to our redux store //5. and returns actions as named exports module.exports = cakeSlice.reducer module.exports.cakeActions = cakeSlice.actions - this slice will take care of action constants, action object, action creator, switch statements in reducer, and handling immutable updates in the reducer. - this slice will generate cake reducers and cake actions.
under the hood
createSlice - under the hood uses the immer library. - to directly mutate the state.
{
state.numOfCakes-- //this is mutation, no care on rest of other props
}
new way: (file name should be of suffix: 'Slice')
- also group together the reducer logic & actions for a single feature in a single file.
- The entire application state is split into slices & managed individually.
const createSlice = require('@reduxjs/toolkit').createSlice
const initialState = {
numOfCakes: 10
}
const cakeSlice = createSlice ({
name: 'cake',
initialState, //if both key & value are same, its better to write just once, //initialState: initialState,
reducers: { // we specify the individual state transitions. value is object
//eg: we have 2 keys 'ordered' & 'restocked'
ordered: (state, action) => { //value is an arrow function
//but for our example 1 parameter is enough, as just decreasing by 1.
//1. we dont have to explicitly return new state
//2. we can directly mutate the new state (wait what!!!! yes - createSlice - under the hood uses the immer library.
state.numOfCakes-- //this is mutation, no care on rest of other props
},
restocked: (state, action) => {
state.numOfCakes += action.payload
},
},
})
// what about the actions?
//3. createSlice - will automatically generate action creators with same name as reducer functions
//4. it also returns the main reducer function we can provide to our redux store
//5. and returns actions as named exports
module.exports = cakeSlice.reducer
module.exports.cakeActions = cakeSlice.actions
- this slice will take care of action constants, action object, action creator, switch statements in reducer, and handling immutable updates in the reducer.
- this slice will generate cake reducers and cake actions.
Thanks a lot ❤
😀
How does RTK / createSlice know what the action.payload should be?
In the context of Redux, the "payload" is a term used to refer to the data that you include when you dispatch an action.
we want tutorial ro rtk query (especially how to deal with manual refresh token ) and make production website with it
why we used module.exports.cakeActions here??
This will be used while dispatching actions from Store.js
Wait for next video and you'll get to know
thank yoU Master!
What about the default parameter of cake restock ?? In slice
I was thinking about the cake slice until he described it😂.
Idk if someone get that cakeSlice pun or not. And at this point I'm too afraid to ask :)
😁
I try with the same code in the video and get this error message
Error: Cannot find module './app' ..
is there any solution ?
Please check the file or folder name or its path for which you are running the command.
Almost finished
Awesome +++++++++++++++++ 😃
{2024-12-20}
nothing understood tbh, all you did was write the code only
wrost tutorial
Awesome +++++++++++++++++ 😃
Awesome +++++++++++++++++ 😃