react 添加 react-redux 基本用法
安装
yarn add react-redux
创建文件、文件夹
|- redux
|- actions.js
|- reducer.js
|- store.js
actions.js
export const change_user_info = "changeUserInfo"
export function ChangeUserInfo( data ){
return {
type: change_user_info,
data: data
}
}
reducer.js
import { change_user_info } from "./actions"
let storeState = {
userInfo: null
}
export default function Store( state = storeState, actions ){
switch( actions.type ){
case change_user_info:
return { ...state, userInfo: actions.data }
default:
return state
}
}
store.js
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
引入
import { Provider } from "react-redux"
import store from "./redux/index"
ReactDOM.render(
<Provider store={ store } >
<App/>
</Provider>,
document.getElementById('root')
);
使用
// 在组件内 引入
import * as React from "react"
import { connect } from "react-redux"
import { changeUserInfo } from "@/redux/actions"
class Hello extends React.Component{
// 使用方式
// this.props.userInfo
// this.props.changeUserInfo( data )
...
// 省略
}
const mapStateToProps = ( state ) =>{
return {
userInfo: state.userInfo
}
}
const mapActionsToProps = ( dispatch )=>{
return {
changeUserInfo: ( data )=>{
dispatch( changeUserInfo( data ) )
}
}
}
export default connect( mapStateToProps, mapActionsToProps )( Hello )
react 添加 react-redux 基本用法的更多相关文章
- react学习之redux和redux-react用法
前言 redux和react-redux的关系: redux就是一个存储数据的对象,并提供了获取/设置store中的属性的解决方案,react-redux是连接react和redux桥梁的封装. ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 新手级配置 react react-router4.0 redux fetch sass
前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...
- React之特点及常见用法
1.什么是React? React是一个用于构建用户界面的JavaScript库.主要用于构建UI,很多人认为Reatc是MVC中的V(视图). React起源于Facebook的内部项目,用来架构I ...
- React学习之redux
在阅读本文之前,希望大家对以下知识点能提前有所了解并且上好厕所(文章有点长): 状态提升的概念 react高阶组件(函数) es6基础 pure 组件(纯函数) Dumb 组件 React.js的co ...
- React项目使用Redux
⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...
- React,关于redux的一点小见解
最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...
- React 环境增加Redux ,React-Redux
引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用. 简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写. 更功利的表达就是: ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
随机推荐
- 2.PAT 1001 害死人不偿命的(3 n + 1 )猜想
题目: 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ...
- 通过自动回复机器人学Mybatis---加强版
第2章 接口式编程 介绍 Mybatis 的接口式编程,并说明为什么要采用这种形式,以及 Mybatis 是如何实现的
- Linux文件系统之目录清单
挂载点:挂载:将设备关联到当前文件系统目录 文件系统:rootfs:根文件系统/boot:系统启动相关文件,如内核.initrd.以及grub(bootleader:引导加载器)/dev:设备文件, ...
- 浅析servlet
目录 Servlet简介 Servlet定义 Servlet的特点 Servlet底层原理 Servlet GenericServlet HttpServlet Servlet的生命周期 Servle ...
- GPU driven pipeline in metal
https://developer.apple.com/documentation/metal/dynamic_terrain_with_argument_buffers?language=objc ...
- 第一份c语言作业
2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? •答案: 软件工程专业是个年轻的专业,紧跟这个信息化的新时代.我学习它是因为感兴趣,经过一周的学习,我了解了一些 该专业课程主要是c语言程 ...
- hadoop关闭安全模式
执行以下语句即可 hadoop dfsadmin -safemode leave
- 让你的python代码优雅地道的小技巧
转载地址:http://www.lightxue.com/transforming-code-into-beautiful-idiomatic-python 用了python这么久,逐渐才了解到pyt ...
- BZOJ 2124 (线段树 + hash)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2124 题意:给一个1到N的排列{Ai},询问是否存在1<=p1<p2< ...
- HDU 5863 cjj's string game ( 16年多校10 G 题、矩阵快速幂优化线性递推DP )
题目链接 题意 : 有种不同的字符,每种字符有无限个,要求用这k种字符构造两个长度为n的字符串a和b,使得a串和b串的最长公共部分长度恰为m,问方案数 分析 : 直觉是DP 不过当时看到 n 很大.但 ...