首页 > 其他分享 >Redux和@reduxjs/toolkit的使用

Redux和@reduxjs/toolkit的使用

时间:2024-01-27 15:56:06浏览次数:32  
标签:reduxjs toolkit state user import Redux store const

1. 简介:
Redux 是一种用于管理应用程序状态的 JavaScript 库。它是一个可预测的状态容器,可以用于编写
可维护和可扩展的应用程序。
@reduxjs/toolkit 是一个官方提供的 Redux 工具包,它可以帮助简化 Redux 应用程序的开发,并
提供常用的 Redux 原生方法,例如创建 Redux store、定义 reducer、处理异步操作等。
2. 用法:
首先,我们需要安装 @reduxjs/toolkit 和 react-redux

npm install @reduxjs/toolkit react-redux -S

1> 引入Provider,对根目录进行一个包装

import { Provider } from 'react-redux';
import store from './store/index.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={srore}>
        <App />
    </Provider>
);

2> 编写store文件,利用@reduxjs/toolkit工具的configureStore创建store

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './reducers/user';
const store = configureStore({
    reducer: {
        user: userReducer
    }
});
export default store;

3> 编写store下的reducers/user文件

import { createSlice } from '@reduxjs/toolkit';
let userSlice = createSlice({
    name: 'user',
    initialState: {
        isLogin: false,
        loginCount: 0
    },
    reducers: {
        addLoginCount(state) {
            state.loginCount++;
        },
        addLoginCountByNum(state, action) {
            state.loginCount += action.payload;
        }
    }
});
// 外部组件来使用的action
export const { addLoginCount, addLoginCountByNum } = userSlice.actions;
// 默认导出是所有的reducer 供store注册这些方法
export default userSlice.reducer;

4>使用store

import './App.css';
import { useState, memo } from 'react';
// 取出行为
import { addLoginCount, addLoginCountByNum } from './store/reducers/user';
import { useDispatch, useSelector } from 'react-redux';

// 在子组件中使用
// 这里的memo保证props发生变化时,才更新
const Son = memo(() => {
    console.log('子组件更新.....')
    const user = useSelector(state => state.user);
    return <h1>我是子组件{user.loginCount}</h1>
})
function App() {
    const user = useSelector(state => state.user);
    const dispath = useDispatch();
    const [num, setNum] = useState(1);
    return (
        <div className="App">
            {user.isLogin ? 'TRUE' : 'FALSE'} || {user.loginCount} || {num}
            <button onClick={e => dispath(addLoginCount())}>更改loginCount+1</button>
            <button onClick={e => dispath(addLoginCountByNum(10))}>更改loginCount</button>
            <button onClick={e => setNum(num + 1)}>变更父组件</button>
            <Son />
        </div>
    );
}
export default App;

memo用法补充:
就如上边代码,在没有用memo包装前,每次修改num的值时,子组件都会随着更新。用memo包装后,组件Son不会随num值的改变而更新。但如果num的值传给了Son组件(<Son num={num}/>),Son组件也会跟随num的值的修改而更新了。大幅度使用会造成缓存越来越大,针对组件大一点且使用频率不是很高的情况下去使用。

标签:reduxjs,toolkit,state,user,import,Redux,store,const
From: https://www.cnblogs.com/lvkehao/p/17991525

相关文章

  • react-redux 的使用(三)
    react-redux的使用(三)单个组件的场景下,我们已经学会了如何从仓库里面拿值,那么其他组件怎么拿呢?关键在于store目录下的index.js文件,如下:import{createStore,applyMiddleware,combineReducers}from'redux'importthunkfrom'redux-thunk'//通过combineReducers将多......
  • react-redux 的使用(一)
    react-redux的使用(一)其实它的使用还是离不开redux它分为两部分,UI组件和容器组件(注意,原有的store文件内容不改变,并且在APP.js渲染的是容器组件)此时产生了一个大改变,就是在页面不再通过store获取数据,而是this.props.xxx容器文件代码如下:import{connect}from'react-redux'......
  • Redux的使用(一)
    Redux的使用store文件如下import{createStore}from'redux'exportconststore=createStore((preState=0,{type,data})=>{switch(type){case'add':returnpreState+datacase'jian':......
  • percona-toolkit工具包的安装和使用
     1.检查和安装与Perl相关的模块  PT工具是使用Perl语言编写和执行的,所以需要系统中有Perl环境。  依赖包检查命令为:rpm-qa perl-DBI perl-DBD-MySQL perl-Time-HiRes perl-IO-Socket-SSL  如果有依赖包确实,可以使用下面的命令安装:yuminstallperl-DBIyuminstal......
  • WPF 使用CommunityToolkit.Mvvm实现Binding示例
    WPF在国内的发展一言难尽。属于那种死不死,活不活的状态。现在应用最多的场景就是上位机了。最近研究了一下WPF中重要的特性之一Binding。如果你没有学会它,基本WPF就没有学明白。研究Binding的时候,我也用了MVVM特性,这也是WPF必学的科目之一。我原来用的是MVVMLight。可是后来......
  • wpf 使用CommunityToolKit.Mvvm实现绑定验证
    接上一个文章,我们在上一个文章中使用CommunityToolKit.Mvvm写了绑定。我们在这篇文章中,写一下绑定验证。绑定验证在WPF系统中也是非常重要的一环。验证可以使得你的系统变得非常健壮。除非你的系统是游戏级别的自娱自乐级别。要么我都建议你加上验证。还是那句老话,写程序一定要......
  • Python系统模块增强库(xToolkit库)
    1什么是xToolkit库库xToolkit的中文名字叫X工具集.是python内置库的一个扩展库.把python的datetime,string,list,dist,xthread等数据结构进行了系统库功能的扩展。安装方法(利用阿里云的pypi源安装会比默认的pypi快很多):pipinstallxToolkit-ihttps://mirrors.aliyun.com/pyp......
  • 使用MVVM Toolkit简化WPF开发
    最近.NET8的WPF推出了 WPFFileDialog改进,这样无需再引用 Win32 命名空间就可以实现文件夹的选择与存储了,算是一个很方便的改进了。顺手写了一个小的WPF程序,在使用 Model-View-ViewModel(MVVM) 模式的时候,我不想使用 Prism 等重量级的框架,找了一个轻量级的MVVMCo......
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发
    https://www.cnblogs.com/wuhuacong/tag/WPF/ 在我们的SqlSugar的开发框架中,整合了Winform端、Vue3+ElementPlus的前端、以及基于UniApp+Vue+ThorUI的移动前端几个前端处理,基本上覆盖了我们日常的应用模式了,本篇随笔进一步介绍前端应用的领域,研究集成WPF的应用端,循序渐进介绍基......
  • WPF MvvmToolkit入门
    最新.net6wpfMVVMToolkit8.0工程搭建。MVVMToolkit是一个轻量级MVVM框架,在框架下我们第一个要做的就是搞清在此框架下的一些常规操作:属性绑定和通知,命令绑定,消息传递。搞懂这些处理流程,然后就可以写自己业务的逻辑。1.安装mvvmtoolkit1.1Nuget下载CommunityToolkit.Mvvm......