React状态管理Redux

什么是Redux

Redux是React中最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行
作用：通过集中管理的方式管理应用的状态
为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer

1.state:一个对象，存放着我们管理的数据状态
2.action：一个对象，用来描述你想怎么修改数据
3.reducer：一个函数，根据action的描述生成一个新的state

Redux与React 环境准备

配套插件：在React中使用Redux，官方要求安装两个其他插件：Redux Toolkit和 react-redux

1.Redux Toolkit(RTK)：官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式
简化store的配置方式
内置immer支持可变式状态修改
内容thunk更好的异步创建

2.react-redux: 用来链接Redux和React组件的中间件
Redux ----> （获取状态） react-redux （更新状态）<----React组件

配置环境基础：
1.使用CRA快速创建React项目
npx create-react-app react-redux-demo
2.安装配套工具
npm install @reduxjs/toolkit react-redux
3.启动项目
npm run start

store目录结构设计

store
├─modules 
│  ├─xxxStore.js
│  └─xxxStore.js
├─index.js

modules目录: 在内容编写业务分类的子store
index.js: store的入口文件，作用是组合modules中所有的子模块，并导出store

Redux与React 实现counter

1. 使用React Toolkit创建counterStore
2. 为React注入Store
   react-redux负责把Redux和React链接起来，内容Provider组件通过store参数把创建好的store实例注入到应用中，链接正式建立
3. React组件中使用store的数据
   在React组件中使用store中的数据，需要用到一个钩子函数useSelector，它的作用是把store中的数据映射到组件中
4. React中修改store中的数据
   React组件中修改store的数据需要借助另外一个hook函数useDispatch,它的作用是生成提交action对象的dispatch函数
5. 提交action传参
   在reducers的同步修改方法中添加action对象参数，在调用actionCreater的时候传递参数，参数会被传递到action对应payload属性上

store/module文件夹下创建counterStore.js文件

import {createSlice} from "@reduxjs/toolkit"

const counterStore = createSlice({
    name: 'counter',
    // 初始化state
    initialState: {
        count: 0
    },
    // 修改状态的方法 同步方法 支持直接修改
    reducers: {
        increment (state) {
            console.log('sync reducer++',state);
            state.count ++
        },
        decrement (state) {
            console.log('sync reducer--',state);
            state.count --
        },
        addToNum(state, action) {
            state.count = action.payload
        }
    }
})

// 解构actionCreater函数
const {increment, decrement, addToNum} = counterStore.actions

// 获取reducer
const reducer = counterStore.reducer

// 按需导出actionCreater
export {increment, decrement, addToNum}

// 默认导出reducer
export default reducer

store/index.js文件引入子模块

import {configureStore} from "@reduxjs/toolkit"

// 导入子模块reducer
import counterReducer from './modules/counterStore'

const store = configureStore({
    reducer:{
        counter: counterReducer
    }
})

export default store

src/index.js文件下配置store

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// store
import store from './store'
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

使用store中的数据和修改数据

import { useSelector, useDispatch } from 'react-redux'
import {increment, decrement,addToNum} from "./store/modules/counterStore"

function App() {
    const {count} = useSelector(state => state.counter)
    const dispatch = useDispatch()
  return (
    <div>
        <button onClick={dispatch(decrement())}>-</button>
        <span>{count}</span>
        <button onClick={dispatch(increment())}>+</button>
        <button onClick={dispatch(addToNum(10))}>设置为10</button>
    </div>
  );
}

export default App;

Redux与React 异步状态操作

1.创建store的写法保持不变，配置好同步修改状态的方法
2.单独封装一个函数，在函数内部return一个新函数，在新函数中
1.封装异步请求获取数据
2.调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
3.组件中dispatch的写法保持不变

store/module文件夹下创建channelStore.js文件

import {createSlice} from "@reduxjs/toolkit"

const channelStore = createSlice({
    name: 'channel',
    initialState: {
        channelList: []
    },
    reducers: {
        setChannelList: (state, action) => {
            state.channelList = action.payload;
        }
    }
})

const {setChannelList} = channelStore.actions;

// 异步请求部分
const getChannelList = () => {
    return async (dispatch) => {
        // 发起请求
        // const res = await axios.get('http://xxx');
        const res = [{id:1,name:'test'},{id:2,name:'bb'}]
        dispatch(setChannelList(res))
    }
}
export {getChannelList}

const reducer = channelStore.reducer;
export default reducer

store/index.js文件引入子模块

import {configureStore} from "@reduxjs/toolkit"

// 导入子模块reducer
import counterReducer from './modules/counterStore'
import channelReducer from './modules/channelStore'

const store = configureStore({
    reducer:{
        counter: counterReducer,
        channel: channelReducer,
    }
})

export default store

使用store中的数据和修改数据

import {useEffect} from "react";
import { useSelector, useDispatch } from 'react-redux'
import {getChannelList} from "./store/modules/channelStore"

function App() {
    const {channelList}= useSelector(state => state.channel)
    const dispatch = useDispatch()
    // 使用useEffect触发异步请求
    useEffect(() => {
        dispatch(getChannelList())
    },[dispatch])
  return (
    <div>
        <ul>
            {channelList.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    </div>
  );
}

export default App;