美文网首页
4、Redux集中式状态管理的库

4、Redux集中式状态管理的库

作者: NanNan | 来源:发表于2022-02-08 11:01 被阅读0次

一 、Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。

不使用 Redux :

  • 只能使用父子组件通讯、状态提升等 React 自带机制

  • 处理远房亲戚(非父子)关系的组件通讯时乏力

  • 组件之间的数据流混乱,出现 Bug 时难定位

使用 Redux :

  • 集中式存储和管理应用的状态

  • 处理组件通讯问题时,无视组件之间的层级关系

  • 简化大型复杂应用中组件之间的通讯问题

  • 数据流清晰,易于定位 Bug

二、Redux 三个核心概念

1.action :一个js对象,包含两个属性

type: 标识属性,值是字符串。多个type用action分开;
payload:数据属性,可选。表示本次动作携带的数据;

注意:actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。

特点:只描述做什么,JS 对象,必须带有 type 属性,用于区分动作的类型
根据功能的不同,可以携带额外的数据,配合该数据来完成相应功能。

2.reducer: 一个纯函数

作用:初始化状态、修改状态,根据传入的旧状态和action,返回新状态。
注意:公式:(previousState, action) => newState

3.store

store:仓库,Redux 的核心,整合 action 和 reducer

特点:

1、一个应用只有一个 store。
2、维护应用的状态,获取状态:store.getState()。
3、创建 store 时接收 reducer 作为参数:const store = createStore(reducer)。
4、发起状态更新时,需要分发 action:store.dispatch(action)
5、其他 API如下:
----a、 订阅(监听)状态变化:const unSubscribe = store.subscribe(() => {})
----b、 取消订阅状态变化: unSubscribe()

相关文章

  • 4、Redux集中式状态管理的库

    一 、Redux 是 JavaScript[https://so.csdn.net/so/search?q=Jav...

  • 前端知识 | Redux的使用

    什么是 Redux? Redux 是整个项目的状态管理中心,数据存储仓库,集中式的存储和管理所有的组件的状态,并且...

  • Redux状态管理与React-router

    Redux状态管理 概念:Redux是专注于状态管理的库 组成:store,state,action,reduce...

  • redux 快速入门5分钟

    基本概念 Redux 是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 它以集中式Store...

  • React-Redux

    Redux:一个纯粹的状态管理系统,npm i redux -S redux是一个独立的专门用于做状态管理的JS库...

  • Vuex核心概念

    状态管理模式Vuex和redux是一个状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状...

  • Redux

    Redux 专注于状态管理的库 Redux专注于状态管理和react解耦 单一状态,单向数据流 核心概念:stor...

  • redux&react-redux

    Redux是什么? redux是一个状态管理器,是一个帮你管理状态的js库,它提供一套单向流通的流程来管理数据状态...

  • Redux

    Redux状态管理 Redux 是 JavaScript 状态管理容器,提供可预测的状态管理。redux 可以让你...

  • 强大的状态管理器Redex

    Redux是什么? redux 是一个专门用于做状态管理的JS库(不是react插件库),学过vue框架的应该知道...

网友评论

      本文标题:4、Redux集中式状态管理的库

      本文链接:https://www.haomeiwen.com/subject/sawrkrtx.html