REACT（TS）仓库

首先  我们要知道  在TS中的仓库和JS中的仓库是不一样的

我们去到TS的官网可以发现  他的文档中其实是有配置的 ，我们只需要稍微修改一下就可以了

那么现在我们开始吧

这是 src文件夹下的创建store文件 创建一个store.ts文件

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

const store = configureStore({
  reducer: {
    这里的三行代码是不需要的
    // posts: postsReducer,
    // comments: commentsReducer,
    // users: usersReducer
  }
})

// 从 store 本身推断出 `RootState` 和 `AppDispatch` 类型
export type RootState = ReturnType<typeof store.getState>
// 推断出类型: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch
// 这里需要抛出一下
export default store

在 store 文件夹下创建一个 model 文件夹 里面创建一个js文件

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
这行也是取消的
// import type { RootState } from '../../app/store'

// 包括这下面的代码  一直到抛出之前都是不需要的
// 为 slice state 定义一个类型
// interface CounterState {
//  value: number
// }

// 使用该类型定义初始 state
// const initialState: CounterState = {
//  value: 0
// }
// 这里开始我们需要改代码
export const counterSlice = createSlice({
// 这里进行删除
  name: 'counter',
  // `createSlice` 将从 `initialState` 参数推断 state 类型
// 将initialState写成对象形式
  initialState:{
//  这里是你的存储数据的地方  你可以定义多个数组  保存你的数据
}
,
  reducers: {
    // 这里是你的算法逻辑 
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    // 使用 PayloadAction 类型声明 `action.payload` 的内容
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    }
  }
})
                // 在这里抛出你的方法名 一定要抛出接收  不然无法使用
export const { increment, decrement, incrementByAmount } = counterSlice.actions
// 选择器等其他代码可以使用导入的 `RootState` 类型
export const selectCount = (state: RootState) => state.counter.value

export default counterSlice.reducer

最后在这里定义一个hooks文件

重新定义useSelector 和 useDispatch

在src文件下创建一个hooks文件夹

直接复制进去就可以

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

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

最后在你的index.ts里改动一点代码就可以使用仓库

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// 引入文件
// 这个是你在store下抛出的文件
import store from './store/Index'
// 这个是你的react-redux包里的文件
import { Provider } from 'react-redux'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
// 最后在这里封装一下即可
<Provider store={store}>
    <App />
</ Provider>
);

官网链接:Redux 中文官网 - JavaScript 应用的状态容器，提供可预测的状态管理。 | Redux 中文官网