第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 */ },
  ...
});

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、创建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;
  }
});

2、在store文件引入

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer';

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

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

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

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      {/*
        dispatch方法中直接
        调用定义的reducer的方法
      */}
      <button onClick={() => dispatch({type: 'increment'})}>Increment</button>
      <button onClick={() => dispatch({type: 'decrement'})}>Decrement</button>
    </div>
  );
};

export default Counter;