快速上手Redux (redux的基本使用)

本文链接：https://blog.csdn.net/Lil_y1/article/details/140751401

什么是Redux？

Redux是一个用于管理JavaScript应用程序状态的库，专注于解决应用程序中状态管理的问题。简单来说就是可以使各组件实现对数据共享和操作，类似于Vue中的Pinia和Vuex。Redux虽然是一个框架无关可以独立运行的插件，但是社区通常还是把它与React绑定在一起使用。

Redux的原理

***该图来自b站尚硅谷***

Redux通过提供一个称为"store"的中央存储库来管理应用程序的状态。store中包含着整个应用程序的状态对象，并且提供了一些方法来更新和访问状态。

另外，Redux还定义了一种称为"action"的数据结构，它描述了发生在应用程序中的某个事件或操作。通过分发action，我们可以告诉Redux要对状态进行何种修改。

Redux还提供了一个叫做"reducer"的纯函数来处理action的分发并更新状态。reducer是一个接收当前状态和action作为参数的函数，它会根据action的类型来决定如何更新状态。

Redux的基本使用

01_Store

Redux中的store是一个用于管理应用程序状态的对象。它是单一的，用于存储整个应用程序的状态数，而不是分散在多个组件中。在React中要创建一个Store我们可以创建一个文件夹和index.js文件，这样方便管理，层级结构一目了然。

其次我们引入redux中的legacy_createStore函数。legacy_createStore调用时要传入一个为其服务的reducer，然后暴露store对象。

// 引入legacy_createStore函数
import { legacy_createStore } from 'redux'
// 将所定义的Reducer作为参数调用legacy_createStore函数
// 此时还没定义reducer 只表示基本使用
export default legacy_createStore(Reducer)

02_Reducer

Redux中的reducer是一个纯函数，用于处理和更新应用的状态。reducer的两个作用分别是初始化状态，加工状态。它接收两个参数：当前的状态(state)和一个action对象，并根据action的type字段来执行相应的操作。

参数action是包括type和payload的一个对象，type字段表示这次的操作类型，payload代表该操作相关的数据。下文作详细说明

此处以定义一个简单的计数器为例。

创建countReducer.js文件，定义countReducer并暴露出去

// 创建countReducer
const countReducer = (state = { count:1 }, action) => {
// 结构获取type 及 data
  const { type, data } = action
// 根据type的不同调用不同方法
  switch (type) {
    // 加法
    case 'add':
      return { count: state.count + data }
    // 减法
    case 'sub':
      return { count: state.count - data }
    default:
      return state
  }
}
export default countReducer

此时index.js文件将其引用

import { legacy_createStore } from 'redux'
// 引入文件
import countReducer from './count_reducer'

export default legacy_createStore(countReducer)

03_Action

在Redux中，action是一个描述发生了什么的普通JavaScript对象。它包含两个必要的属性：type和payload。Type属性描述了所执行的操作的类型，而payload属性包含了与该操作相关的数据。在实际的Redux应用程序中，通常会有多个不同的action，每个action表示不同的操作。这些action会被分发到store中，并通过reducers来处理和更新store的状态。

在我们这个例子中，type属性分别被设置为'add'和'sub'，它表示我们要执行的操作是增加计数器和减计数器。payload属性接收传过来的参数。

创建countAction.js文件进行编写

export const addAction = payload => ({ type: add, payload })
export const subAction = payload => ({ type: sub, payload })

04_组件中使用redux

根据上面的步骤我们已经创建了一个完整的管理count的store，现在我们需要在组件中使用。

在组件中获取存取的数据 store.getState()
对数据进行操作 store.dispatch() 调用传入action
订阅数据变化，数据变化调用 store.subscribe()

现在我们在count组件中使用这些方法

import React from 'react'
// 引入store
import store from '../../store'
// 引入action
import { addAction,subAction } from '../../store/countAction'

export default function App() {
// 数据变化调用
  store.subscribe(() => {
    console.log('数据变化了'，store.getState() );
  })

  return (
    <div>
      <h2>计数组件</h2>
      <div>
        // 点击加 执行加分操作
        <button onClick={()=>addAction(2)}>点击减2</button>
        // 获取数据count
        <b>{store.getState().count}</b>
        // 点击加 执行减分操作
        <button onClick={()=>addAction(3)>点击加3</button>
      </div>
    </div>
  )
}

至此redux的基本使用就到此为止了，感兴趣的童鞋可以去到官网了解更多。

快速开始 | Redux 中文官网

学无止境共勉....