React的状态管理工具 redux的原理及使用方法 状态管理工具

redux的原理及使用方法 状态管理工具

1. 简介
2. 具体流程
3. 使用方法

随着 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文件

1. 创建一个store,并传入reducer
   

2. 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()