Redux基础

简介

状态管理工具，集中式管理react、vue、angular等应用中多个组件的状态，是一个库,使用之后可以清晰的知道应用里发生了什么以及数据是如何修改，如何更新的

在项目中添加 Redux 并不是必须的,根据项目需求选择是否引入 Redux

三个原则

1.单一数据源 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中

2.State 是只读的 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

3.使用纯函数来执行修改,为了描述 action 如何改变 state tree ，需要编写 reducers 

三个要素

1.Action（将要发生的操作）

2.Reducer（根据 action 更新 state，是一个纯函数）

        提供 combineReducers(reducers) 函数组合多个 reducer

3.存放 state 数据的 Store（将 action 和 reducer 联系到一起的对象）

        提供 getState() 方法获取 state 

        通过 subsctibe(listener) 注册监听器 

        通过 subscribr(listener) 返回的函数注销监听器

示例代码

创建一个简单的 Redux 应用，使用前先引入 Redux

npm install redux -S

使用Action 创建函数

 Action 创建函数，是一个返回 action 的函数

function increment() {return {type: "INCREMENT"}
}

Reducer

有了Action，还需要 Reducer 来执行更新（reducer 不是一个对象，而是一个返回更新后 state 的纯函数）

/**
* counters 就是一个 reducer，根据传入的 action 的 type 不同，返回一个新的 state 数据
*/
// 先初始化 state
const initCounter = 0;
function counters(state = initCounter, action) {switch(action.type) {case 'INCREMENT':return state ++;default:return state;}
}

创建store 存放 state 数据

通过 reducer 创建 store

const { createStore } = require('redux');const store = createStore(counters);

通过 store.dispatch(action) 将 action 发送给 reducer，更新 state

store.dispatch(increment());

查看结果

// 通过 store.getState() 获取 State 数据
console.log('counters: ', store.getState());   // => counters： 1

 总结

创建一个操作指令 action -> 创建一个 reducer -> 通过 createStore(reducer) 创建一个 store -> 通过 store。dispatch(action) 执行 reducer 中的更新操作，更新 store 中的数据