在React中通过Redux Toolkit TypeScript使用Redux仓库

风安了

已于 2024-07-12 16:33:37 修改

阅读量490

点赞数 9

文章标签： react.js javascript 前端 typescript

于 2024-07-12 16:30:58 首次发布

本文链接：https://blog.csdn.net/2302_79419626/article/details/140378783

版权

参考网址：入门 Redux | Redux 中文官网

Redux 是一个用于 JavaScript 应用程序的状态管理库。它简单来说就是管理应用程序的状态。

Redux Toolkit TypeScript 提供了一种现代化且类型安全的方式来使用 Redux，是开发复杂前端应用时的一个强大工具

第一步 安装依赖包

# npm
npm install @reduxjs/toolkit react-redux
 
# yarn
yarn add @reduxjs/toolkit react-redux

第二步 在src页面里面创建一个(store)文件夹里面包含index.js 和 module文件夹

准备工作已经完毕下面正式开始操作

定义根 State 和 Dispatch 类型

import { configureStore } from '@reduxjs/toolkit'

// 引入module文件夹下的js文件
import Table = './module/table.js'

const store = configureStore({
  reducer: {
    table:Table   //table是我自定义的 reducer 函数  引入Table里面的方法
  }
})

//RootState 是一个对象，包含了 table 状态的类型
export type RootState = ReturnType<typeof store.getState>

// Redux store 的 dispatch 函数用于分发 action 到 reducers，触发状态的更新。
export type AppDispatch = typeof store.dispatch

定义 Hooks 类型

在src下面创建一个utils/hooks.ts文件

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'

// 把RootState跟AppDispatch引入
import type { RootState, AppDispatch } from '../store/index'


// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

useAppDispatch 是 react-redux 提供的用于获取 Redux dispatch 函数的 React 钩子。在这里，通过 export const useAppDispatch: () => AppDispatch = useDispatch; 将 useDispatch 导出并赋予类型 AppDispatch，即 Redux store 的 dispatch 函数的类型。这样做的好处是，在整个应用程序中可以使用 useAppDispatch 来获取类型安全的 dispatch 函数，而不需要每次都显式地调用 useDispatch

我对useAppDispatch的理解就是引用store/module/table.js下的方法并进行处理

useAppSelector的理解就是把仓库里的数据给拿到页面上来进行使用

定义 slice state 和 action 类型

在src/module/table.js中搭建

import { createSlice } from '@reduxjs/toolkit'

const tableSclice = createSlice({
  name: 'table',
  // 初始数据
  initialState: {
    
  },
  //修改数据的方法  可以直接去修改它
  reducers: {
    //方法
  }
})

//导出 按需导出actions 和 reducer
export const {  } = tableSclice.actions

export default tableSclice.reducer