State 更改為未定義值。 我正在使用帶有 redux-persist 的 redux-toolkit

Question

我正在嘗試在登錄減速器中更改我的 state，但是在state.user = data.user操作之后， console.log打印undefined 。

我的授權切片：

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],
    },
}),

這會在我的控制台中打印以下錯誤：

Answer 1

我自己沒有使用過 Redux 的工具包/ createSlice() ，但他們有一整節關於異步 thunk： https://redux-starter-kit.js.org/api/createAsyncThunk

即你dispatch()異步函數（觸發副作用的動作），並且不在減速器中執行副作用（它們不應該是異步的）。