redux的简单使用

index.js

import React from 'react'

import ReactDOM from 'react-dom'

import { createStore } from 'redux'

import Counter from './Counter'

import counter from './reducers'//初始值和reducer改变state的方法



const store = createStore(counter)//传入counter，创建store

const rootEl = document.getElementById('root')



const render = () => ReactDOM.render(//函数式

  <Counter

    value={store.getState()}

    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}

    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}

  />,

  rootEl

)



render()//运行函数

store.subscribe(render)//监听render

reducer/index.js

export default (state = 0, action) => {//设置初始值，和reducer

  switch (action.type) {

    case 'INCREMENT':

      return state + 1

    case 'DECREMENT':

      return state - 1

    default:

      return state

  }

}

counter/index.js

import React, { Component } from 'react'

import PropTypes from 'prop-types'



class Counter extends Component {

  constructor(props) {

    super(props);

    this.incrementAsync = this.incrementAsync.bind(this);

    this.incrementIfOdd = this.incrementIfOdd.bind(this);

  }



  incrementIfOdd() {

    if (this.props.value % 2 !== 0) {

      this.props.onIncrement()

    }

  }



  incrementAsync() {

    setTimeout(this.props.onIncrement, 1000)

  }



  render() {

    const { value, onIncrement, onDecrement } = this.props

    return (

      <p>

        Clicked: {value} times

        {' '}

        <button onClick={onIncrement}>

          +

        </button>

        {' '}

        <button onClick={onDecrement}>

          -

        </button>

        {' '}

        <button onClick={this.incrementIfOdd}>

          Increment if odd

        </button>

        {' '}

        <button onClick={this.incrementAsync}>

          Increment async

        </button>

      </p>

    )

  }

}



Counter.propTypes = {//检验props传入值；

  value: PropTypes.number.isRequired,

  onIncrement: PropTypes.func.isRequired,

  onDecrement: PropTypes.func.isRequired

}



export default Counter