我正在开发一个react应用程序,并使用redux toolkit进行状态管理。我有一个用户在本地存储中使用JWT store登录,用户的详细信息存储在state.auth.该用户可以使用表单创建其他用户。填写表单详细信息后,当表单提交时,authSlice中的userRegister()操作被调度。
这是调用registerUser操作的handleSubmit函数:
const handleSubmit = (event) => {
event.preventDefault();
const userData = {
name,
email,
password,
confirmPassword,
userType,
userDevices
}
dispatch(registerUser(userData))
};
这是包含registerUser函数的authSlice.js
const initialState = {
userData: {}, //for user data
userToken: null, // for JWT
isAuthenticated: false,
error: null,
}
export const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
//Setting user in redux store
setUser:(state, action) => {
state.loading = false
state.isAuthenticated = true
state.userData = action.payload.user
state.userToken = action.payload.token
},
// Register user
registerUser: async (state, action) => {
try{
const userData = action.payload
console.log("User Dataaaaa from action: ", userData);
const config = {
headers: {
'Content-Type':'application/json'
}
}
const data = await axios.post(`${backendURL}/api/user`,
userData,
config
)
console.log("Data: ", data);
console.log("State: ", state);
}
catch(err){
console.log(err);
}
},
.
.
.
.
问题是当执行registerUser函数时。redux状态被更新,用户状态变为空,再次将应用导航到登录页面。然而,我没有在registerUser函数中更新状态。
另外,当登录页面被重新加载时,用户状态再次被userData填充,因为JWT令牌仍然存储在本地存储中,因为没有从任何地方调用logout。
这是当registerUser操作被调用为x1c 0d1x时redux开发工具中的映像
我正面临着这个奇怪的问题,无法解决它。任何帮助将是伟大的。谢谢。
我尝试从registerUser函数返回{... state},但问题仍然存在。
1条答案
按热度按时间ozxc1zmp1#
你不允许在reducer中执行类似API请求的副作用-reducer必须是同步的,纯的和无副作用的。你在这里写的reducer意外地用Promise替换了你的整个切片。
你在这里要做的事情需要某种中间件。如果你的应用程序中没有发生很多API交互,你应该看看
createAsyncThunk
。如果它是一个更常见的东西,看看RTK查询。这两个都是在official Redux tutorial中处理的,我强烈推荐给你。