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组件来充当
    redux的一些基本概念

  • 创建store

    • 从redux工具中解构出 createStore(),然后生成一个store
      redux的一些基本概念
  • 创建一个reducer,然后将其传入到createStore中辅助store的创建

    • reducer是一个纯函数,接收当前状态和action,返回一个状态,返回什么,store的状态就是什么,需要注意的是,不能直接操作当前状态,而是需要返回一个新的状态,想要给store创建默认状态其实就是给reducer一个参数创建默认值

redux的一些基本概念
redux的一些基本概念

  • 组件通过调用store.getState()方法来使用store中的数据

redux的一些基本概念

  • 组件产生用户操作,调用actionCreators的方法创建一个action,利用store.dispatch方法传递给reducer

redux的一些基本概念
在actionCreators下创建action,并且派发action给reducer
redux的一些基本概念

  • reducer对传递过来的action上的标示性信息做出判断后对新状态进行处理,然后返回新状态,这个时候store的数据就会发生改变 reducer返回什么状态,store.getState就可以获取什么状态
    redux的一些基本概念

  • 我们可以在组件中,利用store.subscribe方法去订阅数据的变化,也就是可以传入一个函数,当数据变化的时候,传入的函数会执行,在这个函数中让组件去获取最新的状态
    redux的一些基本概念

相关文章:

  • 2022-02-15
  • 2021-07-11
  • 2021-11-02
  • 2021-04-17
  • 2021-10-07
  • 2021-11-02
  • 2021-11-05
  • 2021-12-22
猜你喜欢
  • 2021-04-14
  • 2021-09-11
  • 2022-01-01
  • 2021-06-01
  • 2021-08-02
  • 2021-05-16
  • 2021-10-19
相关资源
相似解决方案