如何解决使用 Redux Toolkit 进行用户注册和登录
我正在尝试注册我的用户并同时触发登录操作。当我单独使用 Redux 时,我可以这样做:
export const register = (name,email,password) => async (
dispatch,getState
) => {
try {
dispatch({
type: USER_REGISTER_REQUEST,});
const { data } = await axios.post("/api/users/",{ name,password });
dispatch({
type: USER_REGISTER_SUCCESS,payload: data,});
dispatch({
type: USER_LOGIN_SUCCESS,});
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',reducers: {
userRegisterLoading(state) {
if (state.loading === 'idle') {
state.loading = 'pending';
}
},userRegisterReceived(state,userRegisterError(state,});
export const {
userRegisterLoading,userRegisterReceived,userRegisterError,} = userRegisterSlice.actions;
export const register = (name,city) => async (
dispatch,getState
) => {
dispatch(userRegisterLoading());
try {
const { data } = await axios.post('/api/users',{
name,city,});
dispatch(userRegisterReceived(data));
dispatch(userLoginReceived(data));
const userInfo = getState().userRegister.userInfo;
localStorage.setItem('userInfo',JSON.stringify(userInfo));
} catch (error) {
dispatch(userRegisterError(error.toString()));
}
};
正如您在我的注册函数中看到的,我尝试分派 userRegisterReceived 和 userLoginReceived。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。