使用 Redux 工具包进行用户注册和登录

Question

我正在尝试注册我的用户并同时触发登录操作。 当我单独使用 Redux 时，我可以这样做：

export const register = (name, email, password) => async (
  dispatch,
  getState
) => {
  try {
    dispatch({
      type: USER_REGISTER_REQUEST,
    });
    const { data } = await axios.post("/api/users/", { name, email, password });
    dispatch({
      type: USER_REGISTER_SUCCESS,
      payload: data,
    });
    dispatch({
      type: USER_LOGIN_SUCCESS,
      payload: data,
    });
    localStorage.setItem(
      "userInfo",
      JSON.stringify(getState().userLogin.userInfo)
    );
  } catch (error) {
    dispatch({
      type: USER_REGISTER_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

如果请求成功，这里有两个调度：“USER_REGISTER_SUCCESS”和“USER_LOGIN_SUCCESS”，但是当我切换到redux-toolkit时，我尝试做类似的事情，但只有注册部分被执行，而不是登录部分。 这是我的 redux-toolkit 的完整代码：

import { createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

const userInfoFromStorage = localStorage.getItem('userInfo')
  ? JSON.parse(localStorage.getItem('userInfo'))
  : {};

//USER LOGIN
export const userLoginSlice = createSlice({
  name: 'userLogin',
  initialState: { loading: 'idle', userInfo: userInfoFromStorage },
  reducers: {
    userLoginLoading(state) {
      if (state.loading === 'idle') {
        state.loading = 'pending';
      }
    },
    userLoginReceived(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.userInfo = action.payload;
      }
    },
    userLoginError(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.error = action.payload;
      }
    },
  },
});

export const {
  userLoginLoading,
  userLoginReceived,
  userLoginError,
} = userLoginSlice.actions;

export const login = (email, password) => async (dispatch, getState) => {
  dispatch(userLoginLoading());
  try {
    const { data } = await axios.post('/api/users/login', {
      email,
      password,
    });
    dispatch(userLoginReceived(data));
    const userInfo = getState().userLogin.userInfo;
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  } catch (error) {
    dispatch(userLoginError(error.toString()));
  }
};

export const logout = () => (dispatch) => {
  localStorage.removeItem('userInfo');
  window.location.reload();
};

//USER REGISTER
export const userRegisterSlice = createSlice({
  name: 'userRegister',
  initialState: { loading: 'idle', userInfo: userInfoFromStorage },
  reducers: {
    userRegisterLoading(state) {
      if (state.loading === 'idle') {
        state.loading = 'pending';
      }
    },
    userRegisterReceived(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.userInfo = action.payload;
      }
    },
    userRegisterError(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle';
        state.error = action.payload;
      }
    },
  },
});

export const {
  userRegisterLoading,
  userRegisterReceived,
  userRegisterError,
} = userRegisterSlice.actions;

export const register = (name, email, password, city) => async (
  dispatch,
  getState
) => {
  dispatch(userRegisterLoading());
  try {
    const { data } = await axios.post('/api/users', {
      name,
      email,
      password,
      city,
    });
    dispatch(userRegisterReceived(data));
    dispatch(userLoginReceived(data));
    const userInfo = getState().userRegister.userInfo;
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  } catch (error) {
    dispatch(userRegisterError(error.toString()));
  }
};

正如您在我的寄存器 function 中看到的那样，我尝试发送 userRegisterReceived 和 userLoginReceived。