Redux React-Native：更新状态后获取到undefined对象的问题

从你的代码和描述来看，this.props 出现 undefined 最可能的原因是你的 Index 组件没有被 react-redux 的 Provider 组件包裹，这是使用 connect 高阶组件的必要前提——只有在 Provider 提供的 store 作用域内，被 connect 包装的组件才能拿到映射后的 props。

下面是具体的排查和修复步骤：

1. 确保应用根节点被 Provider 包裹 #

在你的应用入口文件（比如 src/index.js）中，你需要用 Provider 把整个应用（包括你的 Index 组件）包裹起来，并且传入配置好的 store。示例代码如下：

import { Provider } from 'react-redux';
import store from './path/to/your/store'; // 导入你配置好的store
import Index from './Index';

ReactDOM.render(
  <Provider store={store}>
    <Index />
  </Provider>,
  document.getElementById('root')
);

如果没有这一步，connect 无法找到 store，自然无法把 state 和 dispatch 映射到组件的 props 上，导致 this.props 为 undefined。

2. 修复 AuthReducer 的状态结构问题 #

从你的 AuthReducer 代码来看，状态的结构存在不一致的问题：

• LOGGED_IN 分支返回的是数组：[...state, { user: action.data }]
• GET_USER 和默认分支返回的是对象：{...state}

这种结构混乱会导致后续 mapStateToProps 中 state.user 无法正确获取值，甚至引发其他错误。建议统一状态结构为对象，比如初始状态设为：

const initialState = {
  user: null
};

function authReducer(state = initialState, action) {
  switch (action.type) {
    case LOGGED_IN:
      console.log("Inside Logged IN");
      console.log(state);
      return {
        ...state,
        user: action.data // 直接更新user字段
      };
    case GET_USER:
      return { ...state }; // 保持对象结构
    default:
      return { ...state };
  }
}

3. 组件内调用 dispatch 的注意事项 #

在你的 Index 组件的 render 方法中直接调用 this.props.dispatchloggedInUser 和 this.props.dispatchGetUser 是不太规范的，render 方法应该只负责渲染UI，不应该触发状态更新。建议把这些逻辑放到 componentDidMount 生命周期钩子中：

class Index extends React.Component {
  componentDidMount() {
    this.props.dispatchloggedInUser("User found");
    this.props.dispatchGetUser();
  }

  render() {
    console.log("##########################");
    console.log(this.props);
    console.log("###########################");
    return <Root/>;
  }
}

按照以上步骤排查和修复后，你的组件应该能正常通过 this.props 访问到 store 映射过来的状态和方法了。

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