豫ICP备2024044691号-1
powered by emlog
react reduxjs/toolkit
Mins 2024-04-17 react

刚开始用 react 做项目,最初的时候觉得 redux 一坨及其难用,新项目使用 react 18的时候了解到 rtk,记录一下使用过程。

首先安装

npm install @reduxjs/toolkit react-redux

创建 store: store/index.js

import { configureStore } from "@reduxjs/toolkit"
import commonSlice from "./slice/common"
import cloudSlice from "./slice/cloud"

export const commonActions = commonSlice.actions
export const cloudActions = cloudSlice.actions

const store = configureStore({
    reducer: {
        common: commonSlice.reducer,
        cloud: cloudSlice.reducer
    },
})
export default store

创建 slice:store/slice/common.js

import { createSlice } from '@reduxjs/toolkit'
const common = createSlice({
    name: 'common',
    initialState: {
        loading: false
    },
    reducers: {
        loading(state, v) {
            state.loading = v.payload
        },
    },
})

export default common

以上,就创建了一个全局通用的 loading 状态,就可以再别的组件拿来用了。

使用状态:

import Loading from "../../components/loading"
import { useSelector } from 'react-redux'

function App () {
    const loading = useSelector(state => state.common.loading)

    return (
        <div>
            {loading && <Loading />}
        </div>
    )
}

export default App

修改状态:

import { useDispatch } from "react-redux"
import { commonActions } from "../../../store"

function MyComponents() {
    const storeDispatch = useDispatch()
    const commonState = useSelector(state => state.common)

    // 加载中
    storeDispatch(commonActions.loading(true))

    // 加载完成
    storeDispatch(commonActions.loading(false))
}

这么些清晰多了,比直接 redux 写 reducer 和 action 来回折腾舒服多了。