React全家桶(六)redux状态管理

React全家桶

React全家桶 地址
React全家桶(一)之React入门 https://blog.csdn.net/article/124120080
React全家桶(二)之组件化编程 https://blog.csdn.net/article/124194107
React全家桶(三)之React脚手架 https://blog.csdn.net/article/124281588
React全家桶(四)之axios请求数据 https://blog.csdn.net/article/124281650
React全家桶(五)之React-router路由 https://blog.csdn.net/article/124453733
React全家桶(六)之redux状态管理 https://blog.csdn.net/article/124454379

redux状态管理

目录总览:
React全家桶(六)redux状态管理_第1张图片

redux

为什么使用Redux:

使用react进行大型项目开发时,需要管理的状态不仅数量很多而且相互共享,一个状态多个组件都要共享使用并且渲染,管理不断变化的 state 非常困难。所以我们需要把 state 进行统一管理,这样才能控制每一个state的变化,让我们的程序可读性更强,出错率更低。

一、什么是Redux?

Redux 是一个 JS 库,一个状态容器。

作用: 集中式管理 React 应用中 多个组件共享的状态

(1)它可以和 react,vue,angular 等一起使用,但一般都和 react一起使用 。
(2)Redux 可以 解耦 React(View层)于数据管理和对数据的操作,保持View层的纯净,让每一个组件的职责划分更加清楚,同时又降低了React数据传递的难度和不可控性
(3)Redux 采用了中间件机制,既保证了代码的简洁,又增加了可扩展性。

Redux的三大原则:
  • 单一数据源:整个应用的state都被存储到一个状态树里面,并且这个状态树,只存在于唯一的store中。
  • State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers。
使用场景:
  • 某个组件的状态,需要共享;
  • 某个状态需要在任何地方都可以拿到;
  • 一个组件需要改变全局状态;
  • 一个组件需要改变另一个组件的状态。
二、Redux的工作原理
分析

redux流程图如下:

React全家桶(六)redux状态管理_第2张图片

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

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

2. Redux整体执行流程

(1)用户通过事件触发ActionCreator制造action

(2)同时,用户触发的事件内调用dispatch来派发action

(3)reducer接收action,并处理state返回newState

(4)View层通过getState( )来接收newState并重新渲染视图层

三、Redux文件分析

React全家桶(六)redux状态管理_第3张图片

四、Redux流程解析

单个组件使用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重新渲染组件。

React全家桶(六)redux状态管理_第4张图片

五、核心API
  • createStore 创建一个store
  • store.dispatch() 帮助我们派发一个action
  • store.getState() 帮助我们获取到state里面所有的数据内容
  • store.subscribe 可以订阅 store数据的改变 ,只要数据发生改变,store.subscribe接受的回调函数就会被执行

react-redux

一、什么是react-redux?

首先说一下redux和react-redux的区别:

  • redux是react中进行state状态管理的JS库,一般是管理多个组件中共享数据的,它并不是react的插件,是一个独立的库vue和angular等等一些框架都是可以使用的。
  • React-ReduxRedux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。
二、react-redux的工作原理
分析

react-redux流程图如下:(多组件共享状态)

React全家桶(六)redux状态管理_第5张图片

1. react-redux整体执行流程

(1)用户通过事件触发ActionCreator制造action

(2)同时,用户触发的事件内调用dispatch来派发action

(3)reducer接收action,并处理state返回newState

(4)View层通过getState( )来接收newState并重新渲染视图层

三、React容器组件和UI组件
  • React-Redux把所有的组件都拆分成了两大类:UI组件容器组件

React全家桶(六)redux状态管理_第6张图片

UI组件

  1. 只负责UI的呈现,不带有任何业务逻辑
  2. 没有状态(即不适用this.state,或定义 state)
  3. 所有数据都由 props 提供
  4. 不使用任何 Redux 的API

容器组件

  1. 负责管理数据和业务逻辑,不负责UI的呈现
  2. 带有内部状态
  3. 使用 Redux 的API

如何定义容器组件

通过connect方法自动生成容器组件 对 UI组件的增强

connect接收两个参数:
(1)mapStateToProps:负责输入逻辑,即把 state 映射到 UI组件的参数(props)
(2)mapDispatchToProps:负责输出逻辑,即 把用户对UI组件的操作映射成 action

const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

React全家桶(六)redux状态管理_第7张图片

四、react-redux流程解析

单个组件使用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重新渲染组件。

React全家桶(六)redux状态管理_第8张图片

单个组件使用redux:

  • 在单个组件使用redux的基础上,每个组件的action、reducer单独定义。
  • 多个组件的共同状态都存放在唯一的store里面。
  • 汇总所有的reducer变为一个总的reducer,进行统一的暴露。
  • 多个组件的action共用一个constant,定义action中的type类型。
五、核心API
  • createStore 创建一个store
  • store.dispatch() 帮助我们派发一个action
  • store.getState() 帮助我们获取到state里面所有的数据内容
  • store.subscribe 可以订阅 store数据的改变 ,只要数据发生改变,store.subscribe接受的回调函数就会被执行
  • composeWithDevTools 引入Redux DevTools,是一款用于调试的浏览器插件,它用来时时显示当前应用的state信息,action触发记录以及state的变化
  • applyMiddleware Redux 的原生方法,作用是将所有中间件组成一个数组,依次执行。
  • combineReducers 汇总所有的reducer变为一个总的reducer

你可能感兴趣的:(React全家桶,前端,前端框架,react,react.js)