I have my reducer
const userAuthSlice = createSlice({
name: "userAuth",
initialState: {
token: '',
},
reducers: {
setToken: (state, action) => state.token = action.payload.test,
},
});
And I have my dispatch command
<button
value={text.sign_in.submit}
onClick={() => dispatch(userAuthSlice.actions.setToken({test:"test"}))}
/>
As I press the button what I get is this error:
I have isolated everything to be sure that this is the problem and nothing else.
Why does this error pop up?
The issue is the use of an arrow function with no curly braces as the reducer, because that acts as an implicit return statement. So, you're both mutating state.token
, and returning the result of the assignment.
Per the Immer docs on returning data, there's a couple ways to fix this:
void
operator in front of the assignmentso setToken
reducer can be updated with void
as
setToken: (state, action) => void(state.token = action.payload.test)
Points to learn about IMMER
immer
will return finalized draft anywayrecipe
function then as per point 1, the new return value will replace the stateNow coming to answer for the question. this is your reducer function
(state, action) => state.token = action.payload.test
This function is doing two things,
1. modifying state
2. returning action.payload.test
so it's violating point 4 and hence the error from Immer library
in this specific case, intention is only to modify the state, so we have to undo the existing return with void
setToken: (state, action) => void(state.token = action.payload.test)
However, Immer library recommends the use of code block to insure consistency across large code-base, this code block implicitly returns undefined
setToken: (state, action) => { state.token = action.payload.test }
Correct answer
Use Instead of
const userAuthSlice = createSlice({
name: "userAuth",
initialState: {
token: '',
},
reducers: {
setToken: (state, action) => state.token = action.payload.test,
},
});
Use this {I have just added brackets}
const userAuthSlice = createSlice({
name: "userAuth",
initialState: {
token: '',
},
reducers: {
setToken: (state, action) => { state.token = action.payload.test}, // <<= Change Here
},
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With