redux-thunk使用
redux-toolkit
这是一款状态管理的一种
使用
在src创建 stroe文件
在 src/store/index
// store 主要存储一些多个状态管理的集中管理文件
import { configureState } from '@reduxjs/toolkit'
const store = configureState({reducer:{}
})
在src/features/counter/index.jsx
import { createSlice } from '@reduxjs/toolkit'
const initialState= {Msg: "张三",
}
const counter = createSlice({name:"counter",initialState,
})
export default counter.reducer;
下一步src/store/index
import { configureState } from '@reduxjs/toolkit'
import counter from 'features/counter/index.jsx'
const store = configureState({// configureState 中的reducer 只保存 多个文件的状态管理数据reducer:{counter,}
})
下一步将store放在 provider中
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { store } from "./store/index";
ReactDOM.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>,document.getElementById("root")
);如果上面全部完成 我们就可以在页面使用了
views/Msg.jsx
import React from 'react'
import { useSelector } from 'react-rudex'
function Msg() {const Msg=useSelector((store)=>store.名字(counter).Msg)return (<div>Msg {Msg} </div>)
}export default Msg
修改
import { createSlice } from '@reduxjs/toolkit'
const initialState= {Msg: "张三",
}
const counter = createSlice({name:"counter",initialState,// 该方法中只能同步修改不能异步修改reducers:{// 方法名字MsgChange(state,action){//只要学过react 就知道 action是什么
redux-thunk使用相关推荐
- Redux 异步数据流-- thunk中间件源码解析
Thunk 引入背景 这是一个关于Redux异步数据流的故事.引入thunk中间件的完整故事在Redux官方中文文档异步数据流.一句话总结就是:原生Redux只支持同步数据流,所以需要引入中间件(mi ...
- redux 存值 及 取值 的操作
项目目录 首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建: 其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存 ...
- redux-thunk使用_Redux Thunk用示例解释
redux-thunk使用 Redux Thunk is middleware that allows you to return functions, rather than just action ...
- Redux 主要知识学习总结
文章出自个人博客 https://knightyun.github.io/2020/11/29/js-redux-summary,转载请申明 概念 Redux 作为一个状态管理器,可以应用于多种 we ...
- 入门 redux 和 @connect 装饰器
点击上方 前端瓶子君,关注公众号 回复算法,加入前端编程面试算法每日一题群 来源:北孤清茶 https://juejin.cn/post/6953866924065292318 首先第一步利用脚手架创 ...
- React+Redux技术栈核心要点解析（中篇）
感谢作者郭永峰的授权发布. 作者:郭永峰,前端架构师,现用友网络 FED团队负责人,目前主要负责企业级应用前端技术平台建设工作,在前端工程化实现.Node 应用开发.React技术.移动开发等方向有丰 ...
- 喵了个咪！redux middleware居然如此简单
Redux解决了react中出现的多交互.多数据源问题,但是如果有异步操作,或者要对操作进行拦截或者执行后回调就比较麻烦.于是我们需要Redux 中间件. 一.手动增强store.dispatch 我 ...
- 喵了个咪！redux middleware居然如此简单！
Redux解决了react中出现的多交互.多数据源问题,但是如果有异步操作,或者要对操作进行拦截或者执行后回调就比较麻烦.于是我们需要Redux 中间件. 一.手动增强store.dispatch 我 ...
- React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
- Redux异步解决方案之Redux-Thunk原理及源码解析
前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现.但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案.本 ...
最新文章
- matlab中rat=1函数,matlab中的format rat是什么意思
- 判断点是否处于多边形内的三种方法(转)
- cookie和session之会话机制: http 协议 ---》 无状态协议
- 沫沫金：PS快速扣头发丝【详细教程】
- Array.from()方法
- Asp.Net中的跨平台的
- Photoshop cc 2019安装与破解（附资源）
- html5抖动效果代码,JS文字抖动特效代码
- 漫画 | 前端发展史的江湖恩怨情仇～
- linux服务器常用命令
- mysql ndb存储引擎_Cluster的NDB存储引擎
- 【MyBatis】缓存——使查询变得快快快！
- 谷歌浏览器怎么拦截网页广告 5步解决广告困扰
- php redis获取incr的值,Redis Incr命令
- 学习笔记-Burp Suite
- 根据html代码生成word文件
- Qt在线帮助文档网址以及安装包下载地址
- 用普通话软件测试为什么分数都很低,有没有练习普通话的软件？练习普通话软件推荐...
- 生信识图之 点图进阶-4 （PCA下篇）
- java中定义类的关键字是_java中定义类的关键字是什么？
热门文章