React的Redux状态管理

首先Redux只是一种状态管理的解决方案,它里面有几个功能点

Store:数据仓库，保存数据的地方
State:state是一个对象，数据仓库里的所有数据都放到1个state里面
Action:1个动作，触发数据改变的方法
Dispatch:将动作触发成方法
Reducer:是一个函数，通过获取动作，改变数据，生成一个新state，从而改变页面

接下来就用一个案例来演示用法吧，是一个增加和减少数量的案例

先安装Redux

sudo cnpm install redux --save

先创建一个仓库

const store = createStore(reducer)
reducer是需要我们定义传进去的

基本注释我都差不多写了

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

// 用于通过动作创建新的state
const reducer = function(state={num:0},action){
  switch(action.type){
    case "add":
      state.num++;
      break;
    case "decrement":
      state.num--;
      break;
    default:
      break;
  }
  return {...state}
}

//创建仓库
const store = createStore(reducer)
console.log(store)

function add(){
  //通过仓库的方法dispatch进行修改数据
  // 可以传值，也可以传对象
  // store.dispatch({type:"add",content:{id:1,msg:"helloworld"}})
  store.dispatch({type:"add"})
}

function decrement(){
  //通过仓库的方法dispatch进行修改数据
  store.dispatch({type:"decrement"})
}

//函数式计数器
const Counter = function(props){
  let state = store.getState()
  return(
    <div>
      <h1>计数数量:{state.num}</h1>

      <button onClick={add}>计数+1</button>
      <button onClick={decrement}>计数-1</button>
    </div>
  )
}

ReactDOM.render(<Counter></Counter>,document.querySelector('#root'))

store.subscribe(()=>{
   ReactDOM.render(<Counter></Counter>,document.querySelector('#root'))
})