ES5 中最简单的 Redux-React 应用程序：为什么不传递 props？答案

【问题标题】：Simplest Redux-React app in ES5: why aren't props being passed down?ES5 中最简单的 Redux-React 应用程序：为什么不传递 props？
【发布时间】：2016-02-24 17:00:58
【问题描述】：

我正在尝试构建最简单的 Redux 应用程序。我有一个初始状态，我创建了一个 Redux 存储，我将存储传递给 ReactRedux.Provider，并且我的应用程序是 Provider 的子级。

但是，我的 APP 视图，写成一个无状态的功能组件，没有收到任何道具。（如果我使用React.createClass 编写我的APP 视图并在render 方法中检查this.props，情况也是如此。）

我做错了什么？

var initialState = {
  counter: 0
};

var rootReducer = function(state, action) {
  if (!state) state = initialState;
  switch (action.type) {
  default:          // don't do anything yet
    return state;
  }
};

var store = Redux.createStore(rootReducer, initialState);

var APP = function(props) {
  return React.createElement(
    'div',
    {},
    props.counter   // props is not defined
  );
};

ReactDOM.render(
  React.createElement(
    ReactRedux.Provider,
    {store: store},
    React.createElement(APP, null)
  ),
  document.getElementById('app')
);

【问题讨论】：

标签： redux react-redux

【解决方案1】：

您需要使用 React-Redux 提供的 connect() 函数来创建实际连接到商店的“APP”组件的包装版本。见http://redux.js.org/docs/basics/UsageWithReact.html。

您可以自己编写等效的逻辑来订阅 store 并将更新的 props 传递给组件，但通常没有充分的理由这样做。

【讨论】：

啊，谢谢。出于某种原因，我认为 Provider 会为您做到这一点。
不，Provider 只是将 store 引用插入到 React 的“context”特性中，这使得任何需要它的后代组件都可以使用它。生成的包装器组件然后在上下文中查找以获取存储，并订阅其更新。不过，这都是您不必担心的实现细节。只需将<Provider> 粘贴在组件树的顶部，然后使用connect() 包装任何需要从存储中提取数据的组件。

【解决方案2】：

为了将来参考，我将在这里添加一个在 codepen 中的工作案例示例，它既不使用 babel，也不使用 jsx 的集成版本。

https://codepen.io/kanekotic/pen/LxbJNJ

解决方案;TL;DR

如前所述，缺少 redux 连接

var mapstateToProps = function(state) { 
  return{
    counter: state.counter
  }
}
function mapDispatchToProps(dispatch){
    return Redux.bindActionCreators(ActionCreators, dispatch);
}
var connectedApp = ReactRedux.connect(mapstateToProps,mapDispatchToProps)(APP)

然后在组件connectedApp中使用然后没有APP

【讨论】：