Question

我正在尝试构建最简单的Redux应用程序。我有一个初始状态，我创建一个Redux商店，我将商店传递给ReactRedux.Provider，我将我的应用程序作为提供者的子项。

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

我做错了什么？

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 connect

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应用程序：为什么不传递道具？

2 个答案: