Redux state 显示 null[Object object] 即使我已经用数据填充了 state

Question

我正在使用 react 和 redux 开发应用程序，但 redux state 显示 null [Object object]。 我已尝试对其进行故障排除，但我不知道问题出在哪里。

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 { logout, login } = userSlice.actions;

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

export default userSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/userSlice';
import appReducer from '../features/appSlice';

export default configureStore({
 reducer: {
 user: userReducer,
 app: appReducer
},
});

应用程序.js

useEffect(() => {
auth.onAuthStateChanged((authUser) => {
  console.log(authUser.email);
  if (authUser) {
    dispatch(
      login({
        uid: authUser.uid,
        photo: authUser.photoURL,
        email: authUser.email,
        displayName: authUser.displayName
      })
    )
  } else {
    dispatch(
      logout()
    )
  }
})
}, [dispatch]);

我该怎么做 go 呢？

Answer 1

问题

问题似乎是您在成功验证后错误地更新了您的user state。 您正在login减速器中进行某种连接。

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

state.user初始值为null并且您将 object 添加到它。

 const state = { user: null, }; const action = { payload: { uid: 'authUser.uid', photo: 'authUser.photoURL', email: 'authUser.email', displayName: 'authUser.displayName', }, }; state.user += action.payload; console.log(state.user);

解决方案

如果您的目标是“身份验证后的结果是它应该分派登录 function 并使用来自 firebase 的新值填写 state”，那么我认为您想替换当前state.user中的用户值。

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

 const state = { user: null, }; const action = { payload: { uid: 'authUser.uid', photo: 'authUser.photoURL', email: 'authUser.email', displayName: 'authUser.displayName', }, }; state.user = action.payload; console.log(state.user);