• react使用@reduxjs/toolkit和react-redux实现store状态管理


    一、概述

    @reduxjs/toolkitreact-redux是用于在React应用中管理全局状态的工具库

    1、@reduxjs/toolkit

    • @reduxjs/toolkitRedux官方推荐的工具库,是对 Redux 的二次封装,它提供了一些便捷的API和工具,帮助开发者更快速地编写Redux代码。
    • @reduxjs/toolkit包含了一些核心概念,如createSlice用于创建ReducerActionconfigureStore用于创建Redux store
    • 使用@reduxjs/toolkit可以减少样板代码,提高开发效率,并且有助于遵循Redux最佳实践
    • 官方文档:https://redux-toolkit.js.org/

    2、react-redux

    • react-reduxRedux官方提供的React绑定库,它提供了一些React Hooks和组件,用于在React组件中访问Redux store和派发Action
    • 通过react-redux,我们可以将Redux store中的状态映射到React组件的props中,以及将派发Action的方法传递给React组件。
    • 使用react-redux可以方便地在React应用中集成Redux,其中的Provider组件Redux StoreReact应用连接起来 。
    • 官方文档:https://cn.redux.js.org/introduction/why-rtk-is-redux-today

    二、配置与使用

    1、安装

    npm i @reduxjs/toolkit react-redux
    
    • 1

    2、创建一个stroe文件,其中在创建如下:
    (1)modules文件存储子store模块
    (2)index.js组合modules中所有子模块,并导出store

    文件创建参照下图:
    在这里插入图片描述
    3、在modules文件下创建 userStore.ts(这是我的演示demo,名字可自定义, 使用@reduxjs/toolkit创建切片,如下:

    import { createSlice } from '@reduxjs/toolkit'
    
    const userSlice = createSlice({
      name: 'user',
      initialState: {
        isLogin: false,
        info: {},
        list: []
      },
      reducers: {
        setInfo(state, action) {
          state.info = action.payload
        },
        setIsLogin(state, action) {
          state.isLogin = action.payload
        },
        setList(state, action) {
          state.list = action.payload
        }
      }
    })
    //异步请求方法
    const getList = () => {
      return async (dispatch: (arg0: any) => void) => {
          const res = await axios.get('接口地址')
          dispatch(getList(res.data.list))
      }
    }
    export const { setInfo, setIsLogin,getList  } = userSlice.actions
    export default userSlice.reducer
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    4、在stroe文件下的index.ts中组合modules中的所有切片,导出store

    import { configureStore } from '@reduxjs/toolkit'
    import user from './modules/userStore'
    export const store = configureStore({
      reducer:{
        user,
      }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    5、 Provider组件Redux StoreReact应用连接起来 。

    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import './index.css'
    import App from './App'
    import reportWebVitals from './reportWebVitals'
    import { Provider } from 'react-redux'
    import { store } from './store'
    
    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
    root.render(
    	
    		
    			
    		
    	
    )
    
    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    
    // reportWebVitals()
    reportWebVitals(console.log)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    主要代码看配图:
    在这里插入图片描述
    6、使用useSelectoruseDispatch钩子函数 获取state修改state

    import React from 'react'
    import { store } from '@/store'
    import { useSelector, useDispatch } from 'react-redux'
    import { setIsLogin } from './store/modules/userStore'
    type getStateFunType = typeof store.getState
    type IRootState = ReturnType
    function App() {
    	// let state = useSelector((state: IRootState) => ({
    	// 	info: state.user.info,
    	// 	isLogin: state.user.isLogin,
    	// }))
      let {isLogin} = useSelector((state: IRootState)=>state.user)
    	let dispatch = useDispatch()
    	let login = () => {
    		dispatch(setIsLogin(true))
    	}
    	return (
    		
    {isLogin ? '吾乃法外狂徒张三' : '来者何人报上名来'}
    {!isLogin && }
    ) }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    主要代码看配图:
    在这里插入图片描述

  • 相关阅读:
    python ddt数据驱动
    CSDN编程竞赛 ——— 第十期
    LLM应用实战:当图谱问答(KBQA)集成大模型(三)
    【ASE入门学习】ASE入门系列十六——色相与自动变色荧光棒
    IPv6 address status lifetime
    父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动
    传输线理论基础01——相关定义、信号速率、分布参数与电报方程
    CPU核心、使用率、负荷、是否开启超线程、如何排查java程序cpu使用率过高
    利用Paddle OCR进行文字识别
    【操作系统】MBR主引导目录结构以及作用
  • 原文地址:https://blog.csdn.net/qq_44094296/article/details/136374731