❤React-React之中Redux状态管理的使用（react-redux）

1、简介

（1）认识

• redux是纯函数设计，是一个用于管理应用状态的 JavaScript 库
• react-redux为react的redux绑定库, 使react组件可以使用redux，且当 redux store发生变化时，可以自动更新react组件

（2）redux工作流

redux的整个同步过程

redux的整个异步过程

(3)redux特点

1. 单一数据源
2. State是只读的
3. 使用纯函数来执行修改

2、redux 安装使用

yarn add --save redux react-redux

3、在函数式组件中配置使用redux

（1）src下面新建store文件夹

我的整个文件夹配置是这样子的

// 目录结构
src
└───store 
│   └───actions
│   │   │ index.js
│   │   │ xxx.js
│   └───reducers
│   │   │ index.js
│   │   │ xxx.js
│   │ action-types.js
│   │ index.js 
│  index.js

使用如下的顺序构建 Redux 数据流：

`actions/index.js 
    -> reducers/someReducer.js 
    -> reducers/index.js 
    -> store/index.js 
    -> App.js 
    -> components/SomeComponent.js`

（2）配置actions/index.js

export const SOME_ACTION = 'SOME_ACTION';
export function someAction(payload) {
  return { type: SOME_ACTION, payload };
}

（2）配置store/index.js

创建 Redux Store：在应用的顶层创建 Redux store，并将其提供给整个应用

Redux 应用程序的核心是一个单一的存储对象，称为 Store。你需要创建一个 Redux Store 来存储整个应用程序的状态

也可以看作是整个状态管理的入口

import { createStore } from 'redux';
import rootReducer from './reducers'; // 你的根 reducer
const store = createStore(rootReducer);
export default store;

（3）配置reducers/index.js

最后reducers文件下的所有配置都合并成为一个根 reducer

// reducers/index.js
import { combineReducers } from 'redux';
import { allsetReducer } from './allsetReducer'; 
// import yourReducer from './yourReducer'; // 你的 reducer

const rootReducer = combineReducers({
    allsetReducer,
  // 可以在这里添加其他的 reducer
});

export default rootReducer;

（4）配置 allsetReducer.js

这里的allsetReducer.js是我自己进行配置，为了方便整个网站的设置和管理，小模块最后统计进入大的educers/index.js 之中，然后整合成为一个大的reducers

export const allsetReducer=(prevState,action)=>{
    return prevState
}

（5）创建 Action

redux文件夹下面创建一个actions.js

export const slidermenuCollapse = (payload) => ({
  show: true,
  payload,
});

（6）将 Redux Store 提供给应用程序,在根组建之中进行配置

在项目的跟组件App.jsx之中包裹组件

在应用程序的顶层组件中，使用 <Provider> 组件来提供 Redux Store。

// src/index.js

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

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

（7）在react 组件使用

在组件中使用 React Redux：使用 useSelector 钩子来从 Redux store 中选择所需的状态，并使用 useDispatch 钩子来分发 action

// src/Admin.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { someAction } from '../actions';
export function SomeComponent() {
  const dispatch = useDispatch();
  const data = useSelector(state => state.someReducer.data);
  
  const handleClick = () => {
    dispatch(someAction('New data'));
  };
  return (
    <div>
      <p>{data}</p>
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
}

4、connect()高阶函数说明

（1）认识：

connect() 是 React Redux 提供的一个高阶函数，用于将 React 组件连接到 Redux Store。 connect() 接受两个参数：mapStateToProps 和 mapDispatchToProps，并返回一个函数，该函数接受要连接的 React 组件作为参数，并返回一个新的已连接的组件。

（2）引入

//引入到我们使用的组件之中
import {connect} from 'react-redux'

//包裹我们的组件
connnect()

（3） 使用 connect() 连接组件到 Redux

import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
  // 将 Redux Store 中的状态映射到组件的属性中
  // 返回一个对象，对象的属性将作为组件的 props
  // 这里的 state 是整个 Redux Store 的状态对象
  // 你可以根据需要从 state 中提取数据并映射到组件的属性
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  // 将 action 创建函数映射到组件的属性中
  // 返回一个对象，对象的属性将作为组件的 props
  // 这里的 dispatch 用于发送 action 到 Redux Store
  // 你可以在组件中调用这些函数来触发状态的变化
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' }),
});

// 使用 connect() 连接组件到 Redux
// connect() 接受 mapStateToProps 和 mapDispatchToProps 作为参数
// 它返回一个函数，该函数接受要连接的 React 组件作为参数
// 返回的新组件已经和 Redux Store 连接起来了
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(YourComponent);

• mapStateToProps 函数用于将 Redux Store 中的状态映射到组件的属性中。它接收整个 Redux Store 的状态对象作为参数，并返回一个对象，对象的属性将作为组件的 props。
• mapDispatchToProps 函数用于将 action 创建函数映射到组件的属性中。它接收 dispatch 函数作为参数，用于发送 action 到 Redux Store。它返回一个对象，对象的属性将作为组件的 props。
• connect(mapStateToProps, mapDispatchToProps) 是一个高阶函数，它接受 mapStateToProps 和 mapDispatchToProps 作为参数，并返回一个函数，该函数接受要连接的 React 组件作为参数，并返回一个新的已连接的组件。
• 最后，我们将要连接的组件传递给返回的新组件，从而完成了连接组件到 Redux Store 的过程。

ConnectedComponent 组件与 Redux Store 连接可以访问 Redux Store 中的状态，并且可以通过调用属性中的函数来发送 action 到 Redux Store。

所以我们组件就可以写成

import { useSelector, useDispatch,connect} from 'react-redux';

const mapStateToProps = (state) => ({
    menuVisible: state.someReducer.data,
 });

 const mapDispatchToProps = (dispatch) => ({
    someAction: () => dispatch({ type: 'SOME_ACTION' }),
 });

 export default connect(mapStateToProps, mapDispatchToProps)(Home);

5、报错和处理

在 React Redux 9 版本中，useSelector 和 useDispatch 钩子的使用方式与之前版本有一些微小的变化。

createStore 已弃用

Redux 4.x createStore 方法被标记为已弃用， Redux 推荐使用 configureStore 方法来创建 Redux store。

configureStore 方法是 Redux 提供的一个辅助函数，它整合了一系列常用的 Redux 中间件，并提供了 Redux DevTools Extension 集成 一些额外的功能.

// 替换前
import { createStore } from 'redux';
import rootReducer from './reducers'; // 你的根 reducer
export const store = createStore(rootReducer);
// 替换后
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers'; // 你的根 reducer
const store = configureStore({ reducer: rootReducer });

Can’t resolve ‘@reduxjs/toolkit’ in ‘D:\LTB\code\NexusA\src\store’

**检查 node_modules 是否存在 node_modules 目录可能会被损坏或丢失。尝试重新安装依赖项，以确保 node_modules 目录完整。

yarn add @reduxjs/toolkit
import { configureStore } from '@reduxjs/toolkit';

然后在我们的配置craco.config.js 之中添加

'@store': path.resolve(__dirname,'src/store')