安装

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 基本用法的更多相关文章

  1. react学习之redux和redux-react用法

    前言 redux和react-redux的关系:   redux就是一个存储数据的对象,并提供了获取/设置store中的属性的解决方案,react-redux是连接react和redux桥梁的封装. ...

  2. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  3. 新手级配置 react react-router4.0 redux fetch sass

    前言 最近公司来了几个实习生,刚好我手头没什么要紧事,然后领导让我带他们学习react, 为下一个react项目做基础. 然后随手写了几个demo,帮助他们了解正经项目如何去构建配置项目. 现在分享出 ...

  4. React之特点及常见用法

    1.什么是React? React是一个用于构建用户界面的JavaScript库.主要用于构建UI,很多人认为Reatc是MVC中的V(视图). React起源于Facebook的内部项目,用来架构I ...

  5. React学习之redux

    在阅读本文之前,希望大家对以下知识点能提前有所了解并且上好厕所(文章有点长): 状态提升的概念 react高阶组件(函数) es6基础 pure 组件(纯函数) Dumb 组件 React.js的co ...

  6. React项目使用Redux

    ⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...

  7. React,关于redux的一点小见解

    最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...

  8. React 环境增加Redux ,React-Redux

    引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用. 简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写. 更功利的表达就是:  ...

  9. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

随机推荐

  1. 2.PAT 1001 害死人不偿命的(3 n + 1 )猜想

    题目: 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ...

  2. 通过自动回复机器人学Mybatis---加强版

    第2章 接口式编程 介绍 Mybatis 的接口式编程,并说明为什么要采用这种形式,以及 Mybatis 是如何实现的

  3. Linux文件系统之目录清单

    挂载点:挂载:将设备关联到当前文件系统目录 文件系统:rootfs:根文件系统/boot:系统启动相关文件,如内核.initrd.以及grub(bootleader:引导加载器)/dev:设备文件,  ...

  4. 浅析servlet

    目录 Servlet简介 Servlet定义 Servlet的特点 Servlet底层原理 Servlet GenericServlet HttpServlet Servlet的生命周期 Servle ...

  5. GPU driven pipeline in metal

    https://developer.apple.com/documentation/metal/dynamic_terrain_with_argument_buffers?language=objc ...

  6. 第一份c语言作业

    2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? •答案: 软件工程专业是个年轻的专业,紧跟这个信息化的新时代.我学习它是因为感兴趣,经过一周的学习,我了解了一些 该专业课程主要是c语言程 ...

  7. hadoop关闭安全模式

    执行以下语句即可 hadoop dfsadmin -safemode leave

  8. 让你的python代码优雅地道的小技巧

    转载地址:http://www.lightxue.com/transforming-code-into-beautiful-idiomatic-python 用了python这么久,逐渐才了解到pyt ...

  9. BZOJ 2124 (线段树 + hash)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2124 题意:给一个1到N的排列{Ai},询问是否存在1<=p1<p2< ...

  10. HDU 5863 cjj's string game ( 16年多校10 G 题、矩阵快速幂优化线性递推DP )

    题目链接 题意 : 有种不同的字符,每种字符有无限个,要求用这k种字符构造两个长度为n的字符串a和b,使得a串和b串的最长公共部分长度恰为m,问方案数 分析 : 直觉是DP 不过当时看到 n 很大.但 ...