React18学习笔记(二) React的状态管理工具--Redux,案例--移动端外卖平台

原创

已于 2025-09-18 21:09:23 修改 · 836 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

于 2025-09-16 21:48:42 首次发布

文章目录

一.Redux的基础用法

Redux之于React,类似于Vuex或Pinia之于Vue
Redux可以独立于框架运行,作用是通过几种管理的方式管理应用的状态

1.示例:普通网页中的Redux计步器

由于Redux可以独立于React框架,因此可在网页中使用
步骤:

-step1:定义一个reducer函数
该函数根据当前想要做的修改返回一个新状态,新状态的作用是根据不同的Action对象,返回不同的新state(原则:状态不可变)
示例:function myReducer(state,action){
   
   }

-step2:使用createStore方法中的reducer函数生成一个store实例对象
示例:const store=Redux.createStore(myReducer)

-step3:使用store.subscribe方法,订阅数据的变化
(数据一旦变化就会得到通知)
示例:storesubscribe(()=>{
   
   })

-step4:使用store.dispatch方法,提交action对象,触发数据变化
dispatch提交一个action来更新状态
示例:store.dispatch({
   
   type:'INCREMENT'})

-step5:使用store.getState方法,获取最新的状态并更新到视图中
示例:const state=stor.getState()

完整代码:

<!DOCTYPE html>
<html>
<head>
  <title>Redux计数器示例</title>
  <!-- 引入Redux库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js"></script>
</head>
<body>
  <h1>Redux计数器</h1>
  <div>
    <button id="decrement">-</button>
    <span id="counter-value">0</span>
    <button id="increment">+</button>
  </div>
  <script>
    // 1.定义reducer函数
    function myReducer(state = {
    
     count: 0 }, action) {
   
   
      // 判断type:type的值是从action对象中获取的,而action对象是由dispatch函数生成的。
      if (action.type === 'INCREMENT') return {
   
    count: state.count + 1 };//增加:返回新的状态对象
      if (action.type === 'DECREMENT') return {
   
    count: state.count - 1 };
    }
    // 2.使用reducer函数生成store实例
    const store = Redux.createStore(myReducer);
    // 3.通过store实例的subscribe订阅数据变化
    store.subscribe(() => {
   
   //该回调会在每次store更新时被调用。
      // 5.通过store实例的getState方法获取当前状态值，并更新到页面上。
      const state = store.getState();
      // 更新页面上的计数器显示
      document.getElementById('counter-value').textContent = state.count;
    });
    // 4.通过store实例的dispatch函数提交action更改状态
    /*在Redux中修改数据的唯一方式是:通过dispatch提交一个action对象来更新状态*/
    document.getElementById('increment').addEventListener('click', () => {
   
   
      store.dispatch({
   
    type: 'INCREMENT' });// 提交增加计数器的action对象
    });
    document.getElementById('decrement').addEventListener('click', () => {
   
   
      store.dispatch({
   
    type: 'DECREMENT' });// 提交减少计数器的action对象
    });
  </script>
</body>
</html>

2.Redux管理数据的流程

在这里插入图片描述
出于职责清晰和数据流向明确的考量,在Redux中,把修改数据的流程分为三个核心概念:

state对象:存放管理的数据状态
action对象:描述如何修改数据的
reducer函数:形参是state和action,根据acton对象的描述生成一个新的state

3.配套工具和环境准备

3.1.配套工具

Redux Toolkit插件(RTK)

官方推荐的编写Redux逻辑的方式,是一套工具的集合,能简化书写方式

优点:
    简化store的配置方式
    内置immer支持可变式状态修改
    内置thunk更好的异步创建

react-dedux插件

用来链接Redux和React组件的中间件
(Redux向React组件获取状态,React组件向Redux更新状态,都可以通过这个中间件)

3.2.环境准备

创建项目:npx create-react-app my-react-redux(项目名)
进入项目目录:cd my-react-redux
安装配套工具:npm i @reduxjs/toolkit react-redux(插件)
启动项目:npm run start

项目store目录:

src
├─store               用于集中状态管理
│  ├─modules		用于在内部编写业务分类的子store(应用通常有多个子store模块)
│  │  └─index.js      作用是组合modules中的所有子模块并在store中导入

4.示例:React项目中的Redux计步器

思路

Redux store配置:配置counterStore模块,配置根store并导入counterStore模块
React组件:注入store(react-redux),使用和修改store中的数据

步骤

step1:创建子模块

使用React Toolkit的createSlice()方法创建counterStore子模块

//store/modules/counterStore.js

import {
   
   createSlice} from "@reduxjs/toolkit";
const counterstore=createSlice({
   
   
    name:"counter",
    // 初始化state
    initialState:{
   
   //----类似于Vuex中的Store
      count:0
    },
    // 定义reducer函数
    reducers:{
   
   //----类似于vuex中的mutations
        increment(state){
   
   
            state.count++
        },
        decrement(state){
   
   
            state.count--
        }
    }
})

// 解构出actionCreater函数
const {
   
   increment,decrement}=counterstore.actions
// 获取reducer函数
const reducer=counterstore.reducer
// 按需导出actionCreater函数
export {
   
   increment,decrement}
// 默认导出reducer函数
export default reducer

step2:导入子模块

//src/store/index.js

import {
   
    configureStore } from "@reduxjs/toolkit";
// 导入子模块的reducer
import counterReducer from "./modules/counterStore";
export const store = configureStore({
   
   
  reducer: {
   
   
    // 注册子模块的reducer函数
    counter: counterReducer,
  },
});

step3:注入store实例

react-redux可以链接Redux和React,
其内置的Provider组件可以通过store参数,把创建好的store实例注入到应用中,从而正式建立链接

//src/index.js

import {
   
    Provider } from 'react-redux';
import {
   
    store } from './store';
....
    {
   
   /* 注入:将store注入到Provider组件的props中，然后包裹App组件。 */}
    <Provider store={
   
   store}><App /></Provider>