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

Question

我正在尝试构建最简单的 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')
);

Answer 1

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

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

Answer 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

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

Simplest Redux-React app in ES5: why aren't props being passed down?

redux

react-redux