reactjs Redux状态在提交表单时更新

63lcw9qa  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(118)

我正在开发一个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},但问题仍然存在。

ozxc1zmp

ozxc1zmp1#

你不允许在reducer中执行类似API请求的副作用-reducer必须是同步的,纯的和无副作用的。你在这里写的reducer意外地用Promise替换了你的整个切片。
你在这里要做的事情需要某种中间件。如果你的应用程序中没有发生很多API交互,你应该看看createAsyncThunk。如果它是一个更常见的东西,看看RTK查询。
这两个都是在official Redux tutorial中处理的,我强烈推荐给你。

相关问题