React 学习（七）

最新推荐文章于 2024-08-02 22:51:07 发布

原创最新推荐文章于 2024-08-02 22:51:07 发布 · 816 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #学习 #前端

Redux-Toolkit是官方推荐的高效Redux开发工具，它简化了store配置、reducer定义和不可变更新。通过createSliceAPI，可以轻松创建状态切片，自动处理action，内置了ReduxThunk和Reselect等插件。示例展示了如何在CreateReactApp中设置Reduxstore，创建切片并集成到React组件中。

Redux-Toolkit 简单使用

摘自官网

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。

简化最常见场景下的 Redux 开发，

包括配置 store、定义 reducer，不可变的更新逻辑

可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action type

自带了一些最常用的 Redux 插件，

例如用于异步逻辑 Redux Thunk，

用于编写选择器 selector 的函数 Reselect （可缓存select数据）

在 Redux 中,**切片(Slice)**指的是使用 createSlice API 创建的 reducer 和 action 的组合。它是 Redux Toolkit 中的一个核心概念。

createSlice 接收一个配置对象参数,里面包含:

初始 state
reducers:包含不同 reducer 的对象
extraReducers:处理 action 的 reducer 函数

切片让我们可以把 reducer 与 action 打包在一起
创建简化了编写 reducer 的流程
自动生成 action 类型

⚙️ CRA新建一个react项目

create-react-app myapp --template typescript

⚙️ 安装react-redux react-toolkit

npm install @reduxjs/toolkit react-redux

项目基本结构

新建状态管理主文件

// store.ts
import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./slice/counterSlice" // 由切片导入的reducer

export const store = configureStore({
    reducer: {
        counter: counterReducer
    }
})

// 根据store本身推断出推断 `RootState` 和 `AppDispatch`类型
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

在项目入口文件，给App组件注入store

// index.tsx
//....
import { store } from './redux/store'
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

创建切片

之前利用都要分别写各自actionCreator和各自的reducer，现在只用一个切片即可管理

😇 React Toolkit 创建的 Slice 状态state本身是 immutable 的，所以可以放心的直接加工使用

// src/redux/slice/counterSlice.ts
import { createSlice } from "@reduxjs/toolkit"
import { PayloadAction } from "@reduxjs/toolkit"

interface ICounterState {
    value: number
}
const initialState: ICounterState = {
    value: 1
}

// 创建切片
export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        increment: (state) => {
            state.value += 1
        },
        decrement: (state) => {
            state.value -= 1
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
            state.value += action.payload
        },
    }
})

// Action creators 会在各自的reducer函数中自动创建， 这里直接导出
export const { increment, decrement, incrementByAmount } = counterSlice.actions

// 💡注意> 默认导出的是reducer
export default counterSlice.reducer

尝试在App.tsx组件中使用

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, RootState } from './redux/store'
import { decrement, increment, incrementByAmount } from './redux/slice/counterSlice'

const App: React.FC = () => {
  const count = useSelector((state: RootState) => state.counter.value)
  const disptach = useDispatch<AppDispatch>()
  return (
    <div className="App">
      {count}
      <button onClick={() => disptach(increment())}>点击我+1</button>
      <button onClick={() => disptach(decrement())}>点击我-1</button>
      <button onClick={() => disptach(incrementByAmount(100))}>点击我+100</button>

    </div>
  );
}

export default App;

✅成功