React的状态管理工具 redux的原理及使用方法 状态管理工具
redux的原理及使用方法 状态管理工具
- 简介
- 具体流程
- 使用方法
随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如**的路由，被选中的标签，是否显示加载动效或者分页器等等。
管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候，由于什么原因，如何变化已然不受控制。 当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。
如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。前端开发者正在经受前所未有的复杂性，难道就这么放弃了吗？当然不是。
这里的复杂性很大程度上来自于：我们总是将两个难以理清的概念混淆在一起：变化和异步。 我称它们为曼妥思和可乐。如果把二者分开，能做的很好，但混到一起，就变得一团糟。一些库如 React 试图在视图层禁止异步和直接操作 DOM 来解决这个问题。美中不足的是，React 依旧把处理 state 中数据的问题留给了你。Redux就是为了帮你解决这个问题。
跟随 Flux、CQRS 和 Event Sourcing 的脚步，通过限制更新发生的时间和方式，Redux 试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。
查看三大原则地址：redux三大原则
首先我们来看什么是redux
首先在我的理解里，redux就是一个公共的状态管理工具，主要的作用是管理各个文件中需要共享的状态
它的工作流程是什么呢？
React component: 借书的人
Action Creators: 借书时候说的话(表达的意思,行为)
Store : 图书馆的管理员
Reducers: 图书馆的书的一个名册(目录)
简单描述一下
当借书人(react components)向图书馆管理员(store)借书时,表述了自己的诉求(Action Creators),但是管理员他(srore)记不住这个书的信息(在哪儿,是不是有等等吧),所以要去查阅小手册(reducers) 然后在借给借书人(react components)
使用过程**
首先需要明确的事情：
createStore:这是redux中的一个方法,用于创建store,供组件调用.里面需要传入reducer,一个记录共享状态的函数.作为参数.
Store.getState()组件中获取store中的数据方法
在store文件夹里创建一个reducer.js文件和一个index.js文件
-
创建一个store,并传入reducer
-
reducer中存储的共享的数据
Reducer中抛出了一个函数,函数默认传入两个值
1 state 是原本共享的数据
2 action 用户发出的一个行为.里面包含了.做什么操作(type),以及传递过来的值 action.value
那我们在组件中如何获取共享的状态呢？
在组件中,引入store,然后,在constructor中,通过store.getState方法获取共享数据
This.state = store.getState()
那我们又从单个组件中修改共享状态呢？
页面上触发一个方法.
Const action = {type:”change_value”,”Kris”}
Store.dispatch(action)
Action用户发出的一个行为.里面包含了.做什么操作(type),以及传递过来的值 action.value
通过这个dispatch方法,会把这个需求传递给store,自动的传递给reducer 在reducer中做操作
根据不同的指令(action.type).
PS:reducer有一个特性,我可以接收state,但是不能直接修改state.(深拷贝一份儿,修改完了,return出来最新的)
当共享状态的state发生改变之后,使用共享状态的组件中,一定会触发一个方法的回调函数
Store.Subscribe方法中的回调函数
在回调函数里面,获取更新之后的共享状态
更新之后的共享状态获取方式:store.getState()