React（redux状态管理库） 5

Redux 是一个用于 JavaScript 应用的状态管理库，常用于 React 应用。其核心思想是通过单一不可变的状态树（state tree）管理应用状态，并通过纯函数（reducers）更新状态

安装依赖

react-redux

React-Redux 是 Redux 官方提供的 React 绑定库，用于在 React 应用中高效管理全局状态。它通过 Provider 组件和 connect 函数（或 Hooks API）实现 React 组件与 Redux Store 的连接

npm install react-redux

reduxjs/toolkit

Redux Toolkit（RTK）是官方推荐的 Redux 开发工具集，旨在简化 Redux 的使用流程。它提供了一系列工具和最佳实践，帮助开发者更高效地编写 Redux 代码

npm install @reduxjs/toolkit

一.创建 Redux 切片

createSlice

createSlice 是 Redux Toolkit 提供的核心 API，用于简化 Redux 中的 reducer 和 action 创建。它自动生成 action creators 和 action types，减少样板代码

基本用法

引入

import { createSlice } from "@reduxjs/toolkit"

抛出切片

export const userSlice = createSlice({
name: "user1", //指定状态片段的名称
initialState: { //初始化状态
user: "佐助",
age: 18
},
//方法
reducers: {
setName: (state, action) => {
state.user = "斑"
},
setAge: (state, sction) => {
state.age = sction.payload
}
}

每一个reducer函数 都会接收两个参数 state 表示当前状态 action 一个对象  a.type  b.payload 

导出

export default userSlice.reducer
//在slice对象中 有一个属性actions 类型是对象 存储所有reducer
export const { setName, setAge } = userSlice.actions

异步操作

异步编程是一种编程范式，允许任务在后台执行而不阻塞主线程。通过异步操作，程序可以在等待耗时任务（如网络请求、文件读写）完成的同时继续执行其他任务，从而提高效率和响应速度

export function asyncAge(val) {
return (dispatch, getState) => {
return setTimeout(() => {
dispatch(setAge(val))
}, 2000)
}
}

一般写在最下边

二.创建store

引用切片

import { userSlice } from "./silces/user"

configureStore

configureStore 是 Redux Toolkit 提供的核心函数，用于简化 Redux store 的创建过程。它封装了常见的配置选项（如自动组合 reducer、默认启用 Redux DevTools 等），减少样板代码。

import {configureStore} from "@reduxjs/toolkit""

定义Store

const store = configureStore({
reducer:{
user:userSlice.reducer
}
})

抛出

export default store

三.全局配置

Provider

React Provider 是 React Context API 的核心组件之一，用于跨组件层级共享数据，避免逐层传递 props（即“prop drilling”）。Provider 通过包裹子组件树，将数据注入到整个组件层级中，任何子组件均可通过 useContext 或 Context.Consumer 访问这些数据

引用Store和Provider

import store from "./store"
import {Provider} from "react-redux"

渲染

root.render(
<React.StrictMode>
<Provider store={store}><App /></Provider>
</React.StrictMode>
);

四.获取与修改数据

useSelector

useSelector 是 React-Redux 提供的一个 Hook，用于从 Redux store 中提取和订阅状态数据。它接收一个选择器函数作为参数，返回选择器计算后的值。当 Redux store 状态更新时，useSelector 会重新执行选择器函数，如果返回值发生变化，组件会重新渲染

import {useSelector} from "react-redux"
const user =useSelector(({user})=>user)

获取在切片中定义的数据

useDispatch

useDispatch 是 React-Redux 提供的 Hook，用于在函数组件中获取 Redux store 的 dispatch 方法。通过 dispatch 可以触发 Redux 中的 action，从而更新状态。

<button onClick={()=>dispatch(setAge(old))}>点击修改年龄</button>
setAge: (state, sction) => {
state.age = sction.payload
}

sction.payload为传递的old值

以上就是我的本次分享