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

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

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

复制代码
import { configureStore } from '@reduxjs/toolkit'
import user from './modules/userStore'
export const store = configureStore({
  reducer:{
    user,
  }
})

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(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>
)

// 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)

主要代码看配图:

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<getStateFunType>
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 (
		<div className="App">
			<div>
				{isLogin ? '吾乃法外狂徒张三' : '来者何人报上名来'}
			</div>
			{!isLogin && <button onClick={login}> 报山头 </button>}
		</div>
	)
}

主要代码看配图:

相关推荐
伍哥的传说10 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783812 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊23 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
马特说2 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript