redux的基本原理，以及如何在React中使用redux

什么是Redux，他有什么用

Redux 是一个用于 JavaScript 应用的状态管理库，通常与 React 一起使用。它帮助开发者管理应用中各个组件之间的状态，使得状态的变化变得更加可预测和易于调试。

注意：Redux也可以不和React组合使用的哦（通常一起使用）

Redux基本原理

1. 单一真实数据源（Single source of truth）

2. State 是只读的（State is read-only）

3. 使用纯函数来执行修改（Changes are made with pure functions）

4. Action 必须是普通对象（Actions are plain objects）

5. 使用中间件增强 Redux（Middleware for side effects）

Redux在React中具体使用的方法

在React中使用redux，官方建议安装两个其他插件 - Redux Toolkit 和 React-Redux

1. Redux Toolkit（RTK）：官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

2. React-Redux ：用来 链接 Redux 和 React 组件的中间件

3. 安装方式

代码展示使用方式

import { createSlice } from "@reduxjs/toolkit"

const car=createSlice({
    // 命名空间,用来定义数据
    name:"car",
    initialState:{
        num:10,
        name:'张三'
    },
    reducers:{
        // 定义修改数据的方法
        changeName(state,action){
            state.name=action.payload
        }
    }
})

// 导出修改数据的方法
export const {changeName}=car.actions
export default car

在上面的示例中，我们使用 createSlice 函数创建了一个名为 car的 slice。它包含一个名为 car的状态和三个同步的 reducer 函数：changeName

通过changeName派发动作

通过counterSlice.reducer处理动作

Provider组件

Provider是React-Redux中的一个高阶组件，它的作用是将 Redux 的 store 传递给整个 React 应用程序，使得所有的组件都能够访问到 Redux 的状态。通过Provider，我们可以在 React 应用的任何地方使用 Redux 的状态和派发动作

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// 导入App文件
import App from './App';
// 导入路由配置文件
import { RouterProvider } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
// 导入路由
import router from './router';
// 导入redux
import { Provider } from 'react-redux'
// 导入redux store
import store  from './store';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 严格模式 */}
    <Provider store={store}>
      {/* 懒加载，加载中 */}

在上面的示例中，我们将 Redux store 通过 Provider 传递给了根组件 <App />，这样在整个应用程序中的任何地方，我们都可以使用 React-Redux 提供的 hooks 或者高阶组件来访问 Redux 的状态，以及派发 Redux 的动作。

import React, { useEffect } from 'react'
import '../App.css'
// 跳转路由和路由出口
import { Outlet, useNavigate } from 'react-router-dom'
// redux中获取数据，使用redux方法
import { useSelector, useDispatch } from 'react-redux'
// 导入redux事件方法
import {changeName } from '../store/modules/car'

React组件使用store中的数据

useSelector钩子函数

useSelector 是 React-Redux 提供的一个钩子函数，它用于从 Redux store 中选择部分状态。通过 useSelector，我们可以在函数组件中订阅 Redux store 中的状态，并在状态变化时重新渲染组

件。

    // dispatch使用redux事件方法
    const dispatch=useDispatch()
    // 导入redux数据
    const num=useSelector(state=>state.car.num)

 React组件修改store中的数据

<div>
      <h1>Home</h1>
      {/* 展示数据 */}
      <p>{name}</p>
      <button onClick={()=>{
        dispatch(changeName('李四'))
      }}>修改名称</button>
    </div>