• 第55节—— redux-toolkit中的createReducer——了解


    一、概念

    当我们使用 Redux 开发应用程序时,一个非常重要的概念就是 reducer。一个 reducer 是一个纯函数,它接受先前的状态和一个动作,然后返回一个新状态。每个动作都会引起状态的变化,从而使应用程序状态管理更加清晰和可控。

    在 Redux Toolkit 中,createReducer 方法是一个用于创建 reducer 的简单工具,它可以将多个 reducer 函数组合成一个 reducer 函数,并使用更简洁的语法定义 reducer 函数。使用 createReducer 可以大大简化编写 reducer 函数的过程。

    二、基本语法

    1、基本语法

    import { createReducer } from '@reduxjs/toolkit';
    /* 最新版rtk已弃用 */
    const initialState = { /* 初始状态 */ };
    const myReducer = createReducer(initialState, {
      actionCreator1: (state, action) => { /* 处理 actionCreator1 */ },
      actionCreator2: (state, action) => { /* 处理 actionCreator2 */ },
      ...
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2、使用一个带有多个 case 分支的 switch 语句来定义 reducer 函数

    import { createReducer } from '@reduxjs/toolkit';
    
    const initialState = { /* 初始状态 */ };
    const myReducer = createReducer(initialState, (builder) => {
      builder
        .addCase(actionCreator1, (state, action) => { /* 处理 actionCreator1 */ })
        .addCase(actionCreator2, (state, action) => { /* 处理 actionCreator2 */ })
        ...
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    三、例子

    1、创建counter-reducer.js文件

    const initialState = {
      // 初始状态
      count: 0
    };
    
    // 使用createReducer创建Reducer函数
    const counterReducer = createReducer(initialState, {
      // 处理increment action
      increment: (state) => {
        state.count += 1;
      },
      // 处理decrement action
      decrement: (state) => {
        state.count -= 1;
      },
      // 处理reset action
      reset: (state) => {
        state.count = 0;
      }
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    2、在store文件引入

    import { configureStore } from '@reduxjs/toolkit';
    import counterReducer from './counterReducer';
    
    const store = configureStore({
      reducer: counterReducer
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、页面中使用完成加、减、重置功能

    import React from 'react';
    import { useDispatch, useSelector } from 'react-redux';
    
    const Counter = () => {
      const count = useSelector(state => state.count);
      const dispatch = useDispatch();
    
      return (
        

    Count: {count}

    {/* dispatch方法中直接 调用定义的reducer的方法 */}
    ); }; export default Counter;
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    pytorch使用GPU加速--windows11,GTX1650Super
    按头安利!好看又实用的电机 SolidWorks模型素材看这里
    OpenGL Windows 搭建环境(MFC版本)
    重修之Java-基础篇-数据类型和运算符
    通过X射线光刻在指尖大小的芯片中产生高精度微光学元件的晶圆级制造
    AspNetCore7.0源码解读之UseMiddleware
    MHA高可用配合及故障切换
    SpringBoot青海省旅游系统
    怎么把DWG转成DXF格式?这两种方法轻松实现
    Django REST Framework完整教程-RESTful规范-序列化和反序列数据-数据视图
  • 原文地址:https://blog.csdn.net/weixin_57017198/article/details/133755838