Redux

父组件

store.dispatch({type:'add', payload: 1})派发一个类型为add的事件参数为1
store.getState()为拿到store里面的state

import {createStore} from 'redux'

const stateChanger = (state, action)=>{
  if(state === undefined){
    return 0
  }else{
    if(action.type === 'add'){
      var newState = state + action.payload
      return newState
    }else{
      return state
    }
  }

  return newState
}
const store = createStore(stateChanger)  // 创建一个store

// 数据变化时候重新render视图
render()
store.subscribe(()=>{
  render()
})

function add3(){
  if(store.getState() % 2 === 1){
    store.dispatch({type:'add', payload: 1})
  }
}
function add4(){
  setTimeout(()=>{
    store.dispatch({type:'add', payload: 1})
  },2000)
}

function render(){
  ReactDOM.render(<App value={store.getState()} 
    onAdd1={()=>{store.dispatch({type:'add', payload: 1})}}
    onAdd2={()=>{store.dispatch({type:'add', payload: 2})}}
    onAdd3={add3}
    onAdd4={add4}
    />, document.getElementById('root'));
}

子组件想要改变state需要用父组件传下来的方法

class App extends Component {
  add1(){
    this.props.onAdd1()
  }
  add2(){
    this.props.onAdd2()
  }
  add3(){
    this.props.onAdd3()
  }
  add4(){
    this.props.onAdd4()
  }
  render() {
    return (
      <div>
        你点击了 <span id="value">{this.props.value}</span> 次
        <div>
          <button id="add1" onClick={()=> this.add1()}>+1</button>
          <button id="add2" onClick={()=> this.add2()}>+2</button>
          <button id="add1IfOdd" onClick={()=>this.add3()}>如果是单数就+1</button>
          <button id="add1After2Sec" onClick={()=>this.add4()}>两秒钟后+1</button>
        </div>
      </div>
    );
  }
}