My notifySlice
State have to be changed here but it doesn't. ExtraReducers don't see and change state in authSlice and notifySlice. I use thunk called 'login' to login and call notify actions. I also tried to use builder and return instead of 'state = action.payload etc'.State doesn't highlight in extraReducers. How to make it right and not using dispatch in standard thunk function?
const notifySlice = createSlice({
name: 'alert',
initialState: {},
reducers: {
alert(state, action) {
state = action.payload
}
},
extraReducers: {
[login.pending]: (state) => {
console.log(state)
state = {loading: true}
},
[login.fulfilled]: (state, action) => {
console.log(state)
console.log(action.payload)
state = {success: action.payload.msg}
},
[login.rejected]: (state, action) => {
console.log(action.payload)
state = action.payload
}
}
})
export const {alert} = notifySlice.actions
export default notifySlice.reducer
My authSlice
const authSlice = createSlice({
name: 'auth',
initialState: {},
reducers: {},
extraReducers: {
[login.fulfilled]: (state, action) => {
state = {
token: action.payload.accessToken,
user: action.payload.user
}
}
}
})
export default authSlice.reducer
My login asyncThunk
export const login = createAsyncThunk(
'auth/login',
async (data, {rejectWithValue}) => {
try {
const res = await postDataAPI('auth/login', data)
localStorage.setItem('firstLogin', 'true')
return res
} catch (err) {
rejectWithValue({error: err.response.data.msg})
}
}
)
Image of React App with Redux devtools [1]: https://i.stack.imgur.com/SLRme.png
