--- theme: fancy highlight: agate --- # 前言 Redux Tookit 是官方出的 redux 工具，这里简单说一下使用的方法。下文直接使用的是的 Typescirpt 的写法。 ## 传送门 - [Redux 中文官网 - JavaScript 应用的状态容器，提供可预测的状态管理。 | Redux 中文官网](https://cn.redux.js.org/) - [Redux Toolkit | Redux Toolkit](https://redux-toolkit.js.org/) # 安装 ``` yarn add @reduxjs/toolkit yarn add react-redux ``` # 使用新建目录结构如下： ``` ├── src │ ├── store │ │ ├── slices │ │ │ ├── counterSlice.ts │ │ ├── hooks.ts │ │ ├── store.ts │ ├── App.tsx ``` ## 创建 store ```ts // src/store/store.ts import {configureStore} from '@reduxjs/toolkit'; export const store = configureStore({ reducer: {}, }); ``` ## 使用 store 在入口文件最外层添加代码： ```tsx // src/App.tsx import {Provider} from 'react-redux'; import {store} from '@store/store'; const App = () => { return ( ); } export default App; ``` ## 创建 slice ```ts // src/store/slices/counterSlice.ts import {createSlice, PayloadAction} from '@reduxjs/toolkit'; import {RootState} from '../store'; // 初始状态类型 interface CounterState { value: number; } // 定义一个初始状态 const initialState: CounterState = { value: 0, } as CounterState; const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: state => { // Redux Toolkit 内置 Immer 库，可以直接修改 state state.value += 1; }, decrement: state => { state.value -= 1; }, incrementByAmount: (state, action: PayloadAction) => { state.value += action.payload; }, }, }); // 每个 case reducer 函数会生成对应的 Action creators export const {increment, decrement, incrementByAmount} = counterSlice.actions; export default counterSlice.reducer; ``` ## 将 slice 加入到 store ```ts // src/store/store.ts import {combineReducers, configureStore} from '@reduxjs/toolkit'; import counterSlice from './slices/counterSlice'; const rootReducer = combineReducers({ counter: counterSlice, // 有新的 slice 就往这里加 }); export const store = configureStore({ reducer: rootReducer, }); ``` ## 派发 action 先加入相关的 ts 类型： ```ts // src/store/store.ts // 省略其他代码 // 从 store 中推断出 `RootState` 和 `AppDispatch` 的类型 export type RootState = ReturnType; // 推断出类型: {counter: CounterState} export type AppDispatch = typeof store.dispatch; ``` 导出新的 hook： ```ts // src/store/hooks.ts import {useDispatch, useSelector} from 'react-redux'; import type {TypedUseSelectorHook} from 'react-redux'; import type {RootState, AppDispatch} from './store'; // 用下面的带类型的方法替换 `useDispatch` 和 `useSelector` export const useAppDispatch: () => AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; ``` 调用： ```tsx // src/App.ts import {Button, Text, View} from 'react-native'; import React from 'react'; import {decrement, increment} from '@store/slices/counterSlice'; import {useAppDispatch, useAppSelector} from '@store/hooks'; const App = () => { const count = useAppSelector(state => state.counter.value); const dispatch = useAppDispatch(); return (