如何将React-Redux中的props传递给容器组件并在Dashboard展示用户名

问题根因 #

你当前的登录逻辑只完成了接口请求和路由跳转，没有把用户名、邮箱等用户信息存储到Redux的session state中，mapStateToProps自然读取不到对应字段值。

解决步骤 #

1. 补充session模块的Redux逻辑
   首先定义设置登录用户信息的action类型、action creator，在session reducer中添加对应处理逻辑，将传入的用户数据存入state：

// action type
const SET_LOGIN_USER = 'session/setLoginUser'

// action creator
export const setLoginUser = (userInfo) => ({
  type: SET_LOGIN_USER,
  payload: userInfo
})

// session reducer示例
const initialState = {
  user: null
}
const sessionReducer = (state = initialState, action) => {
  switch(action.type) {
    case SET_LOGIN_USER:
      return { ...state, user: action.payload }
    // 其他逻辑比如登出清空用户信息
    default:
      return state
  }
}

2. 修改登录thunk逻辑，请求成功后先同步用户信息到Redux再跳转
   首先给thunk函数入参加上dispatch，接口请求成功后触发setLoginUser的action：

// 引入刚才写的setLoginUser action
import { setLoginUser } from '你的session action文件路径'

export const loginUser = (values, history, setFieldError, setSubmitting) => {
  const username = values.email.split("@")[0]
  // 这里要拿到dispatch参数才能触发Redux action
  return (dispatch) => {
    axios.get(url, {
      params: { name: username }
    }).then((response) => {
      console.log("username", username)
      // 同步用户信息到Redux，你也可以用接口返回的完整用户数据
      dispatch(setLoginUser({
        name: username,
        email: values.email
      }))
      // 存完再跳转路由
      history.push("/user")
    }).catch(error => console.error(error))
    setSubmitting(false);
  }
}

3. Dashboard组件添加空值判断，避免初始加载报错
   用可选链语法兼容user未赋值的场景，避免渲染时报错：

<StyledTitle size={65}>Hello, {user?.name || '加载中'}</StyledTitle>
<ExtraText color={colors.light1}>{user?.email || ''}</ExtraText>

内容的提问来源于stack exchange，提问作者user13695929