react中redux的使用

Redux 是JavaScript应用的状态容器,提供可预测的状态管理。它主要用于解决React在大型复杂应用中组件通讯和状态管理的问题。Redux的核心包括action、reducer和store。action描述发生了什么,reducer负责状态的初始化和修改,store则是应用的状态仓库。通过安装redux、定义reducer、action和store,可以实现对应用状态的管理和组件间的通讯。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是redux

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

为什么Rect要用 Redux

        React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React,写大型应用比较吃力

  • 不使用 Redux  :

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

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

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

  • 使用 Redux :

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

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

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

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

Redux 三个核心概念

        1.action           

  • 一个js对象,包含两个属性:

    • type: 标识属性,值是字符串。多个type用action分开

    • payload:数据属性,可选。表示本次动作携带的数据

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

  • 特点:

    • 只描述做什么

    • JS 对象,必须带有 type 属性,用于区分动作的类型

    • 根据功能的不同,可以携带额外的数据,配合该数据来完成相应功能

        2.reducer

  • 一个纯函数

  • 作用

      1. 初始化状态

      2. 修改状态

  • 修改状态

    根据传入的旧状态和action,返回新状态

    公式:(previousState, action) => newState

        3.store

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

  • 特点:

    • 一个应用只有一个 store

    • 维护应用的状态,获取状态:store.getState()

    • 创建 store 时接收 reducer 作为参数const store = createStore(reducer)

    • 发起状态更新时,需要分发 action:store.dispatch(action)

  • 其他 API, — 订阅(监听)状态变化:const unSubscribe = store.subscribe(() => {}) — 取消订阅状态变化: unSubscribe()

Redux功能演示核心代码

        1.安装redux

npm i redux

         2.定义reducer

initState = 0
export default function reducer(state = initState, action) {
  return state
}

        3.定义action

const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)

const action2 = { type:'add', payload: 1 }

        4.定义store

import reducer from './reducers/index'
import { createStore } from 'redux'
// 创建 store
const store = createStore(reducer)

        5.添加订阅者

// 导入store
store.subscribe(() => {
  ReactDOM.render(<App />, document.getElementById('root'))
})

使用和修改store

        1.获取状态

store.getState()

        2.修改状态

store.dispatch(action)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值