React----react-redux和@react/tookit的使用流程

最新推荐文章于 2024-08-29 18:16:58 发布

朝朝忆萍

最新推荐文章于 2024-08-29 18:16:58 发布

阅读量130

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/jddfj/article/details/129361881

版权

文章介绍了如何在React项目中利用reduxjs/toolkit进行状态管理。首先，下载并安装了必要的工具包，然后在store目录下创建文件来组织redux逻辑。通过createSlice创建了tabsStore，用于管理tabs标签的状态，并在入口文件中注入store以供组件使用。在组件中，使用useSelector和useDispatch来获取和改变state。

摘要由CSDN通过智能技术生成

下载安装工具包

pnpm i react-redux @react/tookit

根目录下创建store文件夹统一管理redux

store文件夹下创建index.js文件，因为是纯数据处理，不需要jsx文件

/store/index.js

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import tabsRoudcer from "./tabsStore"

// 将多个切片组合
const rootReducer = combineReducers({
    tabs: tabsRoudcer
})
//创建store仓库
const store = configureStore({
    reducer: rootReducer
})

export default store

创建切片，tabsStore.js文件

/store/tabsStore.js

import { createSlice } from "@reduxjs/toolkit";
const tabsStore = createSlice({
    name: "tabs",
    initialState:{
            // tabs标签列表
            tabsList: [{
                key: '/dashboard/console',
                label: '主控台',
                closable: false
            }],
            // 高亮标签
            activeKey: '/dashboard/console'
        },

    reducers: {
        // 添加tabs标签
        // 参数state是initialState初始值,{payload}是传递的参数
        changeTabs: (state, { payload }) => {
            let flag = state.tabsList.some(item => item.key === payload.key)
            state.activeKey = payload.key
            // tabsList中是否已经存在
            flag ? null : state.tabsList.push(payload)
            localStorage.setItem('initialState', JSON.stringify(state))
        }
    }
})
//导出actions和reducer
export const { changeTabs } = tabsStore.actions
export default tabsStore.reducer

在入口文件中注入

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 引入初始化样式
import "normalize.css"
//引入仓库
import { Provider } from 'react-redux'
import store from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  // <React.StrictMode>
    //注入store仓库
  <Provider store={store}>
    <App />
  </Provider>
  // </React.StrictMode>,
)

在组件中使用

//引入react-redux的方法
import { useSelector,useDispatch } from 'react-redux';

//引入store对应的actions
import { changeActiveKey, editTabs } from '@/store/tabsStore';

export default function TagsRouter() {
    // 从仓库获取值
    const { tabsList, activeKey } = useSelector(state => state.tabs)
    //调用actions方法
    dispatch(changeTabs(key))
}