State 更改为未定义值。 我正在使用带有 redux-persist 的 redux-toolkit

Question

I'm trying change my state in the login reducer, but after the state.user = data.user operation, the console.log prints undefined .

My authSlice:

import { createSlice } from '@reduxjs/toolkit';
import api from '../../config/api';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    user: null,
    token: '',
  },
  reducers: {
    async register(state, action) {
      console.log(action);
      await api
        .post('users', action.payload)
        .then(({ data }) => {
          state = data.data;
          console.log(state);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async login(state, action) {
      try {
        const { data } = await api.post('sessions', action.payload);
        console.log(state);
        state.user = data.user;
        console.log(state);
        state.token = data.token;
      } catch (err) {
        console.log(err.response && err.response.data.error);
      }
    },
  },
});

const { actions, reducer } = authSlice;

export const { register, login } = actions;
export default reducer;

My store:

import {
   configureStore,
   combineReducers,
   getDefaultMiddleware,
 } from '@reduxjs/toolkit';
 import { AsyncStorage } from 'react-native';
 import {
   persistReducer,
   persistStore,
   FLUSH,
   REHYDRATE,
   PAUSE,
   PERSIST,
   PURGE,
   REGISTER,
 } from 'redux-persist';

 import { authReducer, newsReducer } from '../features';

 const rootReducer = combineReducers({
   authReducer,
   newsReducer,
 });

 const persistConfig = {
   key: 'root',
   storage: AsyncStorage,
   whitelist: ['auth'],
 };

 const persistReducers = persistReducer(persistConfig, rootReducer);

 const store = configureStore({
   reducer: persistReducers,
   middleware: getDefaultMiddleware({
     serializableCheck: {
       ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
     },
   }),
 });

 export const persistor = persistStore(store);

 export default store;

In addition, when I configure my middleware property from configureStore to

middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
}),

That prints the following error in my console:

Answer 1

I haven't used Redux' toolkit/ createSlice() myself, but they have a whole section on async thunks: https://redux-starter-kit.js.org/api/createAsyncThunk

Ie you dispatch() async functions (actions, which triggers side effects), and don't perform side effects in reducers (and they shouldn't be async).