本文从以下几个方面来讲述Redux
1. Redux是什么
2. Redux如何引入
3. Redux基本概念(涉及哪些概念)
4. Redux使用
5. Redux总结
Redux是什么
Redux 是 JavaScript 状态容器,给项目提供可预测化的状态管理。把Web页面看成一个状态机,视图与状态就是一一对应的,所有的状态都保存在一个对象里面。
Redux使用场景
多个组件共用一个状态
Redux的引入
npm install Redux --save
Redux基本概念
Store
store是用来存储所有数据的地方,它具有唯一性,在Redux中提供了createStore这个函数,用来生成 Store。
State
Store保存着所有的数据,由于页面是会变化的,所以Store里的数据也会变化。有时是需要获取Store在某一个时刻时里面的值,这样就涉及到了State(时点数据的集合),想要获取这个值可以通过store.getState()进行获取。
Action
State的值是会随着页面数据的变化而变化的,而Action就是触发
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。Action在使用时是定义一个对象,这个对像一定有type字段,表示该action的名字,其他的都是可以自己定义的,但是一般action里不要传太多的数据。
Dispatcher
store.dispatch()是 View 发出 Action 的唯一方法。可以通过dispatcher action来更新store里的数据
Reducer
Store里的state需要更新后才能让页面也发生变化,而计算新的state的过程就叫Reducer;Reducer是一个函数,其中传入参数是action和state,返回值是新的state。使用如图1所示。
Redux的使用
在组件中使用时使用connect进行连接,传入的参数为要改变的state以及action。如图2所示。
Redux总结
Redux流程图如下图所示