redux note（一）

redux

搭配 React使用

Redux和React之间没有关系，Redux支持React, Angular, Ember, jQuery甚至原生JavaScript

因为React中允许你以state函数的形式来描述页面，Redux通过action的形式来发起state变化

安装

npm install --save redux

要点

1. 应用中所有的state都是以对象树的形式储存在一个store中。如图为应用中唯一的store state_tree.jpg

2. 唯一改变state的方法是触发action，action简单来说也就是一个描述发生了什么的对象。

3. 为了描述action如何改变state树，我们需要编写reducers，看代码

写法流程

下面的步骤这里为了方便演示，是全部写在同一个文件即src/store/index.js，工作中根据实际需求自己进行拆分 模块化

1. 创建应用中唯一的 store

import { createStore } from 'redux'
const store = createStore(reducer) //创建store来存放应用的状态 store的API有：dispatch,subscribe,getState
/**
    getState()： 返回应用当前的state树，它与store的最后一个reducer返回值相同
    dispatch(action)： 分发action。这是触发state变化的唯一途径，使用当前的getState()的结果和传入的action以同步的方式来调用store的reducer函数，返回值会被作为下一个state。同时变化侦听器也会被触发
    subscribe(listen)：  每当 dispatch action时就会执行，你可以在回调函数(listen)中调用getState()来拿到当前的state
*/

2. 编写 reducer

function reducer(state = {}, action) {
    // 通过判断action的type，来描述action是如何把state转变为下一个state
    switch (action.type) {
        case 'TYPE1':
            let newState = JSON.parse(JSON.stringify(state)) // 深拷贝操作
            // 对newState做对应的处理
            return newState
        case 'TYPE2':
            let newState2 = JSON.parse(JSON.stringify(state))
            // 对newState做对应的处理
            return newState2
        default:
            return state
    }
}
/**
 * 这是一个reducer,是一个纯函数, 形式为 (state, action) => state 的函数，这个函数是专门来决定每个action是如何改变应用的state的
 * 当state变化时需要返回全新的对象，而不是修改传入的参数，因此上面使用深拷贝
*/

当我们的应用不断变大， 我们应该把reducer拆分成多个小的reducers，分别独立操作state树的不同部分，而不是增加新的stores。具体怎么拆分，官方文档有示例：三大原则下的使用 纯函数来执行修改

3. 订阅更新 （编写变化侦听器）

可以手动订阅更新，也可以事件绑定到视图层

store.subscribe(() => {
    console.log(store.getState())
    // this.setState(store.getState())
})

4.改变state

改变 state 的唯一方法是dispatch 一个 action

store.dispatch({type: 'TYPE1'})
store.dispatch({type: 'TYPE2'})