【React】TS项目配置Redux

前提条件

在React中使用Redux，官方要求安装两个插件，Redux Toolkit 和 react-redux

Redux Toolkit（RTK）： 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式。

1. 简化 store 的配置方式
2. 内置 immer 支持可变式状态修改
3. 内置 thunk 更好的异步创建

react-redux：用来链接 Redux 和 React组件的中间件。

安装

npm i @reduxjs/toolkit react-redux

浏览器插件 - Redux DevTools(推荐但不强制使用)

下载并启用插件

控制台找到redux选项

配置

目录结构

src 下创建 store，其中 index.ts/index.js 作为modules中所有store的集合

store/index.ts配置

import {
   
    configureStore } from '@reduxjs/toolkit'

const store = configureStore({
   
   
  reducer: {
   
   },
})

// 后续使用useSelector时参数state的类型
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export default store

index.ts 或 main.ts中注册store

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// 添加如下
import store from './store'
import {
   
    Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={
   
   store}>
    <App />
  </Provider>,
  document.getElementById('root'