文件目录

使用时在src目录下创建一个store文件夹，统一管理仓库

index.ts中创建仓库和导出TS类型

index.ts文件: configureStore

在store/index.ts创建一个store，统一管理多个slice

使用TS时，导出相关类型

// configureStore创建一个redux数据
const store = configureStore({
  // 合并多个Slice
  reducer: {
    data: dataSlice,
    counter1: counterSlice
  }
})

export default store

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

Hooks文件

导出设置的hooks，用于获取slice和dispatch

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

// use hook 节约每次引入type的工作
// useSelector: 节约配置RootState type

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

Slice文件夹

可以编写多个slice，slice就是原来redux中的reducer

比如data.ts

创建一个slice

// 创建一个 Slice
export const dataSlice = createSlice({
  name: 'data',
  initialState: initState,
  // 定义 reducers 并生成关联的操作
  reducers: {
    updateBlocks: (state, action: PayloadAction<Array<Block>>) => {
      state.blocks = action.payload
    },
    updateAttributeLeft: (state, action: PayloadAction<IpropsLeft>) => {
      state.blocks[action.payload.index].left -= action.payload.left / 2
    },
    moveAttributeLeft: (state, action: PayloadAction<IpropsLeft>) => {
      state.blocks[action.payload.index].left = action.payload.left - 260
    },
    updateAttributeTop: (state, action: PayloadAction<IpropsTop>) => {
      state.blocks[action.payload.index].top -= action.payload.top / 2
    },
    moveAttributeTop: (state, action: PayloadAction<IpropsTop>) => {
      state.blocks[action.payload.index].top = action.payload.top - 90
    },
    updateAttributeAlignCenter: (state, action: PayloadAction<number>) => {
      state.blocks[action.payload].alignCenter = false
    },
    updateAttributeFocus: (state, action: PayloadAction<number>) => {
      state.blocks[action.payload].focus = !state.blocks[action.payload].focus
    },
    setAttributeFocusFalse: (state, action: PayloadAction<number>) => {
      state.blocks[action.payload].focus = false
    }
  }
})

//导出

export const {
  updateBlocks,
  updateAttributeLeft,
  moveAttributeLeft,
  updateAttributeTop,
  moveAttributeTop,
  updateAttributeAlignCenter,
  updateAttributeFocus,
  setAttributeFocusFalse
} = dataSlice.actions
// export const selectCount = (state: RootState) => state.data.value
// 默认导出
export default dataSlice.reducer

name用于在store中选择该silce

initialState：初始值

reducers：相关操作，传递两个参数
- state：存放的数据
- action：进行的操作，分为两个参数
  - type：在原来的redux是需要写的，现在好像有自定义，也可也自行设置
  - payload：你传递的参数，我在案例中传递了对象，分别获取属性区修改state

在文件中使用

导入reducer使用方法

import { useAppDispatch, useAppSelector } from './store/hooks'

在组件中获取state数据和使用dispatch修改数据

  // data获取数据
  const data = useAppSelector((state) => state.data)
  // 通过useDispatch 派发事件
  const dispatch = useAppDispatch()

修改数据时，调用对应的dispatch

dispatch(updateBlocks(res))

这个res就是传进去的action.payload

会更新仓库中的数据

一些注意事项

store中的数据是只读的，库做了一些设置，让我们也可写直接修改的代码，但是背后有逻辑帮忙深拷贝重新更改数据。

如果store中是个数组，可以自行设置id或者使用index去获取到具体数据。

@reduxjs/toolkit 入门案例