redux的设计思想
1. Web应用是一个状态机,视图与状态是一一对应的
2. 所有的状态保存再一个对象里面
redux的流程
1. store通过reducer创建初始化状态
2. view通过store.getState()获取到了store中保存的state挂载在自己状态上
3. 用户产生操作,调用了action的方法
4. action方法被调用。创建带有标志性信息的action
5. action内部通过调用store.dispatch()方法将具有标志性的action发送到reducer中
6. reducer接收到action并会根据标志信息判断之后返回新的state
7. store的state被reducer更改为新的state的时候,store.subscribe()方法的回调函数就会执行,此时就可以通知view去重新获取新的stat
reducer是一个纯函数
在reducerc纯函数不得有以下的操作:
- 不能对之前的状态进行更改,内部必须是同步的
- 不能有不纯粹的操作,如:Math.randow() new Date()
- 不能调用异步的API和路由
redux有四个部分组成
-
store:用来存储数据的
-
reducer:管理数据的(事件处理函数)
-
actionCreators:创建action,是action的创建者,交由reducer来处理
-
view:用来使用数据,在这里,一般用reducer组件来充当
-
创建store
- 从redux工具中解构出 createStore(),然后生成一个store
- 从redux工具中解构出 createStore(),然后生成一个store
-
创建一个reducer,然后将其传入到createStore中辅助store的创建
- reducer是一个纯函数,接收当前状态和action,返回一个状态,返回什么,store的状态就是什么,需要注意的是,不能直接操作当前状态,而是需要返回一个新的状态,想要给store创建默认状态其实就是给reducer一个参数创建默认值
- 组件通过调用store.getState()方法来使用store中的数据
- 组件产生用户操作,调用actionCreators的方法创建一个action,利用store.dispatch方法传递给reducer
在actionCreators下创建action,并且派发action给reducer
-
reducer对传递过来的action上的标示性信息做出判断后对新状态进行处理,然后返回新状态,这个时候store的数据就会发生改变 reducer返回什么状态,store.getState就可以获取什么状态
-
我们可以在组件中,利用store.subscribe方法去订阅数据的变化,也就是可以传入一个函数,当数据变化的时候,传入的函数会执行,在这个函数中让组件去获取最新的状态