本文主要是介绍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 中的数据
这篇关于Redux基础的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
