转:react-redux原理介绍，最易懂的说明

1. 目录

<ul>
  
    redux简介
  
  
    案例
  
  
    react-redux核心介绍
  


<h4 class="heading" data-id="heading-1">
  2. redux简介
</h4>

<ul>
  
    redux是react全家桶的一员，它试图为 React 应用提供「可预测化的状态管理」机制。
  
  
    Redux是将整个应用状态存储到到一个地方，称为store
  
  
    里面保存一棵状态树(state tree)
  
  
    组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件
  
  
    其它组件可以通过订阅store中的状态(state)来刷新自己的视图
  


<h4 class="heading" data-id="heading-2">
  3. 安装
</h4>

```

npm install –save redux 复制代码

    <h4 class="heading" data-id="heading-3">
      4. redux核心
    </h4>
    
    
      4.1 State
    
    
    
      state是数据集合
    
    
    
     可以理解为工厂加工商品所需的原材料
    
    
    
      4.2 action
    
    
    
      State的变化，会导致View的变化。但是，用户接触不到 State，只能接触到View 所以，State的变化必须是 View导致的。
    
    
    
      action就是改变state的指令，有多少操作state的动作就会有多少action。
    
    
    
     可以将action理解为描述发生了什么的指示器
    
    
    
      4.3 reducer 加工函数
    
    
    
      action发出命令后将state放入reucer加工函数中，返回新的state。可以理解为加工的机器
    
    
    
      4.4 store
    
    
    
     store 可以理解为有多个加工机器的总工厂
    
    
    ```
let store = createStore(reducers);
复制代码

  Store 就是把它们联系到一起的对象。Store 有以下职责：


```

维持应用的 state； 提供 getState() 方法获取 state； 提供 dispatch(action) 方法更新 state； 通过 subscribe(listener) 注册监听器; 通过 subscribe(listener) 返回的函数注销监听器。 复制代码

    
      [我们](https://www.w3cdoc.com)可以通过store.getState()来了解工厂中商品的状态， 使用store.dispatch发送action指令。
    
    
    <h4 class="heading" data-id="heading-4">
      5. 经典案例
    </h4>
    
    
      这是一个redux的经典案例
    
    
    <ul>
      
        定义reducer函数根据action的类型改变state
      
      
        actions 定义指令
      
      
        通过createStore创建store
      
      
        调用store.dispatch()发出修改state的命令
      
    
    
    ```
import { createStore } from 'redux'

const reducer = (state = {count: 0}, action) => {
  switch (action.type){
    case 'INCREASE': return {count: state.count + 1};
    case 'DECREASE': return {count: state.count - 1};
    default: return state;
  }
}

const actions = {
  increase: () => ({type: 'INCREASE'}),
  decrease: () => ({type: 'DECREASE'})
}

const store = createStore(reducer);

store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

复制代码

 [我们](https://www.w3cdoc.com)可以直接在react component上使用store.dispatch，但是这样不太方便，这个时候[我们](https://www.w3cdoc.com)需要react-redux


```

class Todos extends Component { render(){ return( <div onCLick={()=>store.dispatch(actions.delTodo()) }>test