redux的基本使用方法

redux的使用

//文件store/index.js
import { creatStore } from 'redux'
const counterReducer = function ( statr = 0, action ) => {
   switch (action.type) {
       case 'add':
          return state+1
          break;
        case 'munus':
          return state-1
          break;
         default:
           return state
           break; 
    }
}
const store = creatStore (counterReducer )
export default store;

组件里面

import React, { Component } from 'react'
import store from './store'
export default class ReduxTest extends Component {
  componentDidMount(){
    //订阅状态变更
    store.subscribe(() => {
      this.forceUpdate()
    })
  }
 render(){
    return(
       <div>
          {store.getState()}
          <button onClick={()=>store.dispatch({type: 'add'})}>+</button>
          <button onClick={()=>store.dispatch({type: 'minus'})}>-</button>
       </div>
    )
  }
}

因为redux是不像vuex一样状态改变后使用到的视图就会自动刷新,所以需要去订阅

redux提供的api

1. createStore 创建仓库store
2. reducer 初始化、修改状态函数
3. getState 获取状态值
4. dispatch 提交更新
5. subscribe 变更订阅