Redux报错

Question

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

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

const store = createStore(reducer)
const rootEl = document.getElementById('root')

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

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

render()
store.subscribe(render)

报错信息为：Uncaught ReferenceError: onIncrement is not defined

Answer 1

Counter函数组件在传参时，少了两个props属性(解构语法)，像下面这样改一下就可以了:

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