React与Redux Toolkit的简单使用、ts环境中一些常见问题的解决方案

最新推荐文章于 2025-11-01 14:36:00 发布

原创

最新推荐文章于 2025-11-01 14:36:00 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript #javascript

本文介绍了如何利用create-react-app创建一个集成Redux Toolkit、typescript的React应用，无需额外安装redux、redux-thunk等库。通过示例详细展示了如何创建子reducer、使用异步方法，并配置store，以及在React组件中使用这些功能。同时，文章提到了在TS环境中遇到的常见问题，如npm包类型问题和非代码资源导入，并给出了解决方案。

安装

创建react+redux的TS环境（最佳实践）无须再安装redux、redux-thunk、react-redux、immer等，默认就已经集成了@reduxjs/toolkit的Redux架构。

create-react-app react-admin --template redux-typescript

参考链接：https://github.com/reduxjs/cra-template-redux-typescript

使用Redux Toolkit完成react的状态管理

demo效果演示如下
在这里插入图片描述

生成一个子reducer （createAsyncThunk, createSlice）

/**
 src/store/test/testSlice.ts

*/
import {
   
    createAsyncThunk, createSlice } from '@reduxjs/toolkit';
// 异步请求
import {
   
    fetchIp } from './testAPI';

// 设置类型
export interface testState {
   
   
  value: number;
  ip: object
}
// 设置初始化state
const initialState: testState = {
   
   
  value: 1,
  ip:{
   
   }
};

// createAsyncThunk这个API可以用来设置异步方法,我们可以通过这个API来让redux支持异步。
export const getIpAsync = createAsyncThunk(
  'test/fetchIp',
  async () => {
   
   
    const response = await fetchIp();
    console.log(response)
    return response.data;
  }
);

export const testSlice = createSlice({
   
   
  name: 'test',
  initialState,
  // The `reducers` field lets us define reducers and generate associated actions
  reducers: {
   
   
    increment: (state) => {
   
   
      // Redux Toolkit允许我们在reduce中编写“突变”逻辑.  
      //它实际上不会改变状态，因为它使用Immer库， 
      //检测到“派遣状态”的变化，并产生一个全新的基于这些变化的不可变状态
      state.value