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

【问题标题】：State changing to undefined value. I'm using redux-toolkit with redux-persist状态更改为未定义的值。我正在使用带有 redux-persist 的 redux-toolkit
【发布时间】：2020-08-13 18:16:20
【问题描述】：

我正在尝试在 login 减速器中更改我的状态，但在 state.user = data.user 操作之后，console.log 打印 undefined。

我的 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;

我的商店：

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;

另外，当我将我的中间件属性从 configureStore 配置为

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

在我的控制台中打印以下错误：

【问题讨论】：

标签： javascript reactjs react-native redux-persist redux-toolkit

【解决方案1】：

我自己没有使用过 Redux 的工具包/createSlice()，但他们有一整节关于异步 thunk：https://redux-starter-kit.js.org/api/createAsyncThunk

即dispatch() async 函数（触发副作用的操作），并且不要在 reducer 中执行副作用（它们不应该是异步的）。

【讨论】：

reducers 内部的逻辑会影响初始状态吗？