React Redux 记数器

npm init react-app counter
cd counter
npm install

将 src/index.js改为

import React from ‘react‘;
import { createStore } from ‘redux‘
import { connect,Provider } from ‘react-redux‘
import ReactDOM from ‘react-dom‘;
// action creator
const CountAction= {
    increment : {type: ‘INCREMENT‘},decrement : {type: ‘DECREMENT‘}
}
// reducer
function counter(state = 0,action) {
  switch (action.type) {
    case CountAction.increment.type:
      return state + 1
    case CountAction.decrement.type:
      return state - 1
    default:
      return state
  }
}
let store = createStore(counter)

// presentational component
const counterCreator = ({ number,onClick }) => 
   (
      <div>
        <div>{number}</div>
          <button onClick={() =>{onClick(‘increment‘)}}>
            Increase
          </button>
          <button onClick={() =>{onClick(‘decrement‘)}}>
            Decrease
          </button>
      </div>
    )

const mapStateToProps = state => {
    return {
        number: state
    }
}
const mapDispatchToProps = (dispatch) => { 
    return {
        onClick: clickType => {
            dispatch(CountAction[clickType])
        }
    }
}
// container
const Counter = connect(mapStateToProps,mapDispatchToProps)(counterCreator)

ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>,document.getElementById(‘root‘)
)

运行 npm start 效果如下：