Knowledge Base

redux-toolkit

2 min read

教程视频

这个项目尝试全程使用yarn作为包管理工具

初始化

创建react项目, 然后安装依赖

yarn add @reduxjs/toolkit react-redux

创建store

import {configureStore} from "@reduxjs/toolkit";
 
export const store = configureStore({
    reducer: {
    }
})

创建reducer

model/store.ts

import {store} from "../store";
 
export type RootState = ReturnType<typeof store.getState>
export type RootDispatch = typeof store.dispatch
 
export interface countState {
    value: number
}

service/countReducer.ts

import { createSlice } from "@reduxjs/toolkit"
import { countState } from "../model/store.ts"
 
const initialState: countState = {
    value: 0
}
 
const countSlice = createSlice({
    name: "countReducer",
    initialState,
    reducers: {
        increment: (state: countState) => {
            state.value += 1
        },
        decrement: (state: countState) => {
            state.value -= 1
        }
    }
})
 
export default countSlice.reducer
export const {increment, decrement} = countSlice.actions

添加到store

在store中import countReducer from "../service/countReducer.ts", 然后在reducer对象体内加上count: countReducer

因为在countReducer里面用的是默认导出, 所以import的名字无所谓

使用

需要给<App >添加Provider

<Provider store={store}>
    <App />
</Provider>

在需要的地方引入:

import {useDispatch, useSelector} from "react-redux";
import {RootDispatch, RootState} from "../model/store.ts";
import {decrement, increment} from "../service/countReducer.ts";
 
const Counter = () => {
    const count = useSelector((state: RootState) => state.counter.value)
    const dispatch = useDispatch<RootDispatch>()
    return <>
        {count}
        <br/>
        <br/>
        <button onClick={() => dispatch(increment())}>+1</button> {/*别忘了要加上括号, 返回值才是Action*/}
        <br/>
        <br/>
        <button onClick={() => dispatch(decrement())}>-1</button>
    </>
}
 
export default Counter

异步

const countSlice = createSlice({
	...,
    extraReducers (builder) {
        builder.addCase(incrementAsync.fulfilled, (state, { payload }) => {
            state.value += payload
        })
    }
})
export const incrementAsync = createAsyncThunk("incrementAsync", async () => {
    return await new Promise<number>((resolve) => {
        setTimeout(() => {
            resolve(2)
        }, 2000)
    })
})

使用与上面的用法一样, 但是这里的dispatch必须加上类型约束

Graph View