Javascript React-redux：登录后用户信息未存储在redux中

嘿，伙计们，我是react redux的新手，我正在尝试在登录后将用户信息存储在redux商店中，我正在为此使用django后端

在

app.js

中安慰用户会给我一个空值，并显示一个TypeError

TypeError:Object不可编辑（无法读取属性符号（Symbol.iterator））

谁能告诉我，我做错了什么，以及如何正确地做

这是代码

store.js

import {configureStore} from '@reduxjs/toolkit';
import userReducer from '../features/UserSlice';

export default configureStore({
    reducer: {
        user: userReducer,

    },
});

UserSlice.js

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

export const userSlice = createSlice({
    name: 'user',
    initialState: {
        user: null,
    },

    reducers: {
        login: (state, action) => {
            state.user = action.payload;
        },

        logout: (state) => {
            state.user = null;
        }
    },
})

export const {login, logout} = userSlice.actions;

export const selectUser = state => state.user.user;

export default userSlice.reducer;

login.js

const dispatch = useDispatch();


const userInfo = async function userProfileInfo() {
    await axiosInstance.get(url).then((res) => {
        const currentUser = res.data;
        dispatch(login({
            user: currentUser,
        }))
    })
}


const handleSubmit = (e) => {
        e.preventDefault();
        // console.log(formData);

        axiosInstance
            .post(`api/accounts/token/`, {
                email: formData.email,
                password: formData.password,
            })
            .then((res) => {
                localStorage.setItem('access_token', res.data.access);
                localStorage.setItem('refresh_token', res.data.refresh);

                userInfo();
                
                history.push('/');  
                // console.log(res);
                 // console.log(res.data);
            });
        
    };

index.js

<Provider store={store}>            
    <Route exact path="/login" component={HomeScreen} />
    <Route exact path="/" component={App} />
</Provider>

谢谢

也许这会有帮助：

const userInfo = async function userProfileInfo() {
  //return a promise here
  return await axiosInstance.get(url).then((res) => {
    const currentUser = res.data;
    dispatch(
      login({
        user: currentUser,
      })
    );
  });
};

const handleSubmit = (e) => {
  e.preventDefault();
  // console.log(formData);

  axiosInstance
    .post(`api/accounts/token/`, {
      email: formData.email,
      password: formData.password,
    })
    .then((res) => {
      localStorage.setItem(
        'access_token',
        res.data.access
      );
      localStorage.setItem(
        'refresh_token',
        res.data.refresh
      );
      //wait for userInfo to finish
      return userInfo();
    })
    .then(() => {
      //here userInfo is finished (can have failed too)
      history.push('/');
      // console.log(res);
      // console.log(res.data);
    });
};

通常情况下，人们会通过thunk动作来实现这一点：

const fetchThunk (arg)=>(dispatch,getState)=>{
  dispatch(loading(arg));
  fetch(arg).then(
    result=>dispatch(success(result)),
    error=>dispatch(failed(error))
  )
}

---

这意味着您必须在redux状态下存储登录用户的状态。

确保未加载userinfo，或尝试从thunk action和userinfo函数返回承诺。感谢您的回复。我真的不明白你的意思，你能分享更多的信息吗。我正处于学习阶段。：）这是您的完整login.js文件吗？因为您不能在react组件之外使用useDispatch挂钩。您可能需要将其包装在自定义挂钩中，以便在组件中使用，或者直接在组件中使用它。我正在登录组件中使用它。您好，谢谢，在我将

userInfo

函数移动到另一个

之后，它就可以工作了。然后（）

，但是当我刷新页面时，登录的所有信息都丢失了，有没有办法保存它？@prehistoricbeast您可以将其存储在localstorage中