redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1
1.redux使用相关的安装
yarn add redux
yarn add react-redux(连接react和redux) 2. redux在项目中的基础使用 1.在index.js入口文件注入store
import { Provider } from "react-redux"
import store from "./redux/store"
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById("root")
) 2.新建一个store文件夹,新建store.js和reducers.js文件 3.在store.js文件中书写以下代码
import { createStore} from "redux"
import reducers from "./reducers"
const store = createStore(reducers);
export default store 4.在reducer.js文件中书写以下代码
const defaultState = {
list:[]
}
export default (state=defaultState, action)=>{
if(action.type === 'add'){
return {
list:[...state.list,action.payload]
}
}
return state
} 5.如何在子组件中使用store(直接引入store.js也可以,但不推荐)
import { connect } from "react-redux"
const mapState = (state)=>{
return {
//获取store中的值,将list注入组件的props中
list:state.list
}
}
const mapDispatch = (dispatch)=>{
return {
//返回一个add方法,将其注入组件的props中,组件可直接通过this.props.add()调用
add(){
dispatch({
type:'add',
payload:'ldc'
})
}
}
}
//connect执行完后返回的是一个高阶组件,再将Home注入强化
export default connect(mapState,mapDispatch)(Home) 6.在组件中调用
<ul>
{
this.props.list.map((val,index)=>{
return <li key={index}>{val}</li>
})
}
</ul>
<button onClick={this.props.add}>ADD</button> 7.这样简单的redux在项目中使用就完成了
redux在react项目中的应用的更多相关文章
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
随机推荐
- Linux queue.h之TAILQ队列分析
转自 这两天想看看memcached的实现,所以先学习了libevent,使用起来还是比较简单的,其实是对select/poll/kqueue等的封装,学习libevent过程中又遇到了linux下队 ...
- CodeForces - 803F
http://codeforces.com/problemset/problem/803/F #include <iostream> #include <cstdio> #in ...
- Remember, every day is a miracle.
Remember, every day is a miracle.请记住,每一天都是一个奇迹.
- 把云数据库带回家!阿里云发布POLARDB Box数据库一体机
9月26日,2019杭州云栖大会上,阿里云宣布正式推出高性能数据库一体机——POLARDB Box,用户部署在自有数据中心即可享受云数据库的便捷体验,同时还为Oracle等传统数据库用户提供一键迁移功 ...
- 单层感知机_线性神经网络_BP神经网络
单层感知机 单层感知机基础总结很详细的博客 关于单层感知机的视频 最终y=t,说明经过训练预测值和真实值一致.下面图是sign函数 根据感知机规则实现的上述题目的代码 import numpy as ...
- spring mvc多环境下配置文件的设置
在实际开发时经常需要把一些配置信息写在配置文件,比如mysql的主机地址.端口号.用户名和密码等.另外,在开发代码时可能用一套配置参数,而部署到测试环境时又会用另一套配置参数,测试完毕再部署到线上环境 ...
- http://www.2cto.com/ 红黑联盟
http://www.2cto.com/ 红黑联盟,一个不错的学习或者开阔眼界的网站,内部由中文书写.比较适合国人.
- 51nod-1130-N的阶乘的长度V2(斯特林近似)-套斯特林公式
输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. 输入 第1行:一个数T,表示后面用作输入测试的数的数量.(1 <= T <= 1000) 第2 - T + 1行:每 ...
- day 66 Django基础之jQuery操作cookie
Django基础之jQuery操作cookie jquery之cookie操作 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery. ...
- jQuery链式编程时修复断开的链
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...