React基础

redux真没有那么复杂,通俗易懂,小白必备

2022-04-29  本文已影响0人  生命里那束光

一、什么是Redux

Redux 是一个 JS 库,一个状态容器,集中管理项目中共享的状态。
作用类比vuex:

二、Redux的工作原理

redux流程图如下:

1. redux的三个关键函数:getState()、subscribe()、dispatch()

  • getState() :用于获取当前最新的状态
  • subscribe() :用于订阅监听当前状态的变化,然后促使页面重新渲染
  • dispatch() :用于发布最新的状态

2. 单个组件使用redux流程:
(1)创建redux的核心store对象,store集中管理状态。那状态从哪来呢?Reducer

(2)创建Reducer,定义状态的初值、处理状态的方法。 Reducer是只负责执行,那需要判断的东西从哪来呢?Action

(3)在创建Action之前,我们需要创建constant.js定义action中的type类型

(4)创建Action,对定义好的方法进行封装。 那封装好的函数去哪里用呢?在组件中使用

(5)在组件中绑定事件(dispatch()引用封装函数,处理状态),使用getState() 获取最新状态

(6)使用subscribe()订阅store,监听根组件(最外部),只要状态发生改变,就调用render重新渲染组件。

上一篇 下一篇

猜你喜欢

热点阅读