Redux Toolkit

世间万物皆对象

发布于 2024-03-20 19:55:44

800

发布于 2024-03-20 19:55:44

文章被收录于专栏：startstart

简介

Redux Toolkit包旨在成为编写Redux逻辑的标准方式。它最初的创建是为了帮助解决关于 Redux 的三个常见问题： “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 做任何有用的事情” “Redux 需要太多样板代码” 我们无法解决所有用例，但本着create-react-appand的精神apollo-boost，我们可以尝试提供一些工具来抽象设置过程并处理最常见的用例，并包含一些有用的实用程序，让用户简化他们的应用程序代码。 Redux Toolkit 还包括一个强大的数据获取和缓存功能，我们称之为“RTK Query”。它作为一组单独的入口点包含在包中。它是可选的，但可以消除您自己手写数据获取逻辑的需要。这些工具应该对所有 Redux 用户都有益。无论您是设置第一个项目的全新 Redux 用户，还是想要简化现有应用程序的经验丰富的用户，Redux Toolkit都可以帮助您改进您的 Redux 代码。

安装

使用 React 和 Redux 启动新应用程序的推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板来创建 React App，它利用了Redux Toolkit和 React Redux 与 React 组件的集成。

快速创建项目 (jsx类型) npx create-react-app my-app --template redux
快速创建项目 (tsx类型) npx create-react-app my-app --template redux-typescript
如果已有项目 npm install @reduxjs/toolkit or yarn add @reduxjs/toolkit

api

Redux Toolkit 包括以下 API：

configureStore(): 包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
// configureStore创建了一个redux数据
export const store = configureStore({
 reducer: {
   counter: counterReducer,
 },
});

createReducer()：这使您可以为 case reducer 函数提供操作类型的查找表，而不是编写 switch 语句。此外，它自动使用该immer库让您使用普通的可变代码编写更简单的不可变更新，例如state.todos[3].completed = true.
createAction()：为给定的动作类型字符串生成动作创建函数。该函数本身已toString()定义，因此可以使用它来代替类型常量。

import { createAction, createReducer } from '@reduxjs/toolkit'

const increment = createAction('counter/increment')
const decrement = createAction('counter/decrement')
const incrementByAmount = createAction('counter/incrementByAmount')

const initialState = { value: 0 }

const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state, action) => {
      state.value++
    })
    .addCase(decrement, (state, action) => {
      state.value--
    })
    .addCase(incrementByAmount, (state, action) => {
      state.value += action.payload
    })
})

createSlice()：接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的动作创建者和动作类型。
createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { fetchCount } from './counterAPI';

const initialState = {
  value: 0,
  status: 'idle',
};
export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount) => {
    const response = await fetchCount(amount);
    return response.data;
  }
);
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1; //内置了immutable
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = 'idle';
        state.value += action.payload;
      });
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export const selectCount = (state) => state.counter.value;
export const incrementIfOdd = (amount) => (dispatch, getState) => {
  const currentValue = selectCount(getState());
  if (currentValue % 2 === 1) {
    dispatch(incrementByAmount(amount));
  }
};

export default counterSlice.reducer;//默认导出

createEntityAdapter: 生成一组可重用的 reducer 和 selector 来管理 store 中的规范化数据
重新选择库中的createSelector实用程序，重新导出以方便使用。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-02-28，如有侵权请联系 cloudcommunity@tencent.com 删除

redux