0

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

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

我究竟做错了什么？

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')
);
4

2 回答 2

1

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

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

于 2016-02-24T17:20:25.913 回答
0

为了将来参考，我将在这里添加一个在 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中使用

于 2017-01-17T23:09:16.463 回答