javascript - Egghead 视频中的 React Redux 计数器示例

Question

我刚刚在处理 Dan 关于 Egghead 视频的 redux 类(class)时遇到了一个问题。调度操作时，ReactDOM 渲染似乎不起作用。有什么想法吗？ 我无法弄清楚到底缺少什么。

这是代码片段的链接:http://jsbin.com/medogul/10/edit?html,js,output

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

const Counter = ({
  value,
  onDecrement,
  onIncrement
}) => (
  <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}> + </button>
    <button onClick={onDecrement}> - </button>
  </div>
);

const { createStore } = Redux;

// specify store with the reducer
const store = createStore(counter);

const render = () => {
  ReactDOM.render(
    <Counter value={store.getState()} 
    onIncrement={() => store.dispatch({type:'INCREMENT'})}
    onDecrement={() => store.dispatch({type:'DECREMENT'})}
    />
    document.getElementById('root')
  );
}

store.subscribe(render);
render();

谢谢

Answer 1

您的代码中有 2 个小问题:

1. 您不应将 getState 函数传递给组件，而应传递其调用返回的值:<Counter value={store.getState()}

2. 您在 React.render 函数中省略了逗号:

   <Counter value={store.getState()} 
            onIncrement={() => store.dispatch({type:'INCREMENT'})}
            onDecrement={() => store.dispatch({type:'DECREMENT'})}
   />, // here must be a comma added
   document.getElementById('root')
   

jsbin 上的固定版本