引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用。
简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写。
更功利的表达就是:  就是引入以后, 写控件的时候 根据props 去展示数据,操作也在props去引用。 各司其职。

Redux 使用到:createStore, dispatch
代码参考:

import React from "react";
import {connect} from "react-redux"; class App extends React.Component{
constructor(){
super();
} render(){
return <div>
<h1>{this.props.v}</h1>
<button onClick={()=>{
this.props.add()
}}>按我加1</button>
</div>
}
} export default connect(
(state) => ({
v : state.v
}),
(dispatch) => ({
add(){
dispatch({"type" : "ADD"})
}
})
)(App);

相应配置。 npm安装React, React-redux, redux-logger(每次调用dispatch 之前后都可以看状态, 方便调试)

//展示界面。 redux的createStore

import React from "react";
import ReactDOM from "react-dom";
import {createStore , applyMiddleware} from "redux";
import {Provider} from "react-redux";
import reduxLogger from "redux-logger"; import App from "./App.js";
import reducer from "../reducers"; // 创建store,项目只有唯一的一个store,全局数据。applyMiddleware表示Logger插件。
const store = createStore(reducer, applyMiddleware(reduxLogger));
console.log(store.getState()); ReactDOM.render(
<Provider store={store}>
<App></App>
</Provider>
,
document.getElementById("app")
)
//控件App 只管渲染界面,connect 使用。
import React from "react";
import {connect} from "react-redux"; export class App extends React.Component{
constructor(){
super();
} render(){
return <div>
<h1>{this.props.v}</h1>
<button onClick={()=>{
this.props.add()
}}>按我加1</button>
</div>
}
} export default connect(
(state) => ({
v : state.v
}),
(dispatch) => ({
add(){
dispatch({"type" : "ADD"})
}
})
)(App);
//reducers/index.js 操作部分
export default (state = {"v" : 100} , action) => {
if(action.type == "ADD"){
return {
"v" : state.v + 1
}
} else if (action.type == "MINUS") {
return {
"v": state.v - 1
}
}
return state;
}

进一步 分离actions 。 如上。

export default connect(
(state) => ({
v : state.v
}),
(dispatch) => ({
add(){
dispatch({"type" : "ADD"})
}
})
)(App); 变更为:
export default connect(
(state) => ({
v : state.v
}),
(dispatch) => {
return {
actions:bindActionCreators(actions, dispatch)
}
}
)(App);
//需要引入,增加actions 文件:
import {bindActionCreators} from "redux"
import * as actions from "./actions.js" //action.js 文件:
export const add = ()=> {
//console.log("未点击时,已经执行函数绑定操作")
return {"type":"ADD"}
}
export const minus = ()=> {return {"type":"MINUS"}} export const attachNumber = (number) =>{
return {"type":"ATTACHNUMBER","number":number}
}

如果需要传参操作: 
需要

//reducers/index.js 对传递参数的使用
else if(action.type == "ATTACHNUMBER") {
return {
...state,
"v": state.v + action.number
}
} //App.js 中对应取值。
attachNumber(){
let num = Number(this.refs.numberText.value);
this.props.actions.attachNumber(num);
} render(){
return <div>
<h1>{this.props.v}</h1>
<button onClick={()=>{
this.props.actions.add()
}}>按我加1</button>
<br />
<input type="text" ref="numberText" />
<input type="button" value="增加特定数" onClick={
(this.attachNumber).bind(this)}/> </div>
}

参考:

阮一峰: http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
https://www.jianshu.com/p/5b3f874cd7a9
中介者模式: https://blog.csdn.net/qq3965470/article/details/52304399

React 环境增加Redux ,React-Redux的更多相关文章

  1. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  2. Flux --> Redux --> Redux React 入门

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  3. Flux --> Redux --> Redux React 基础实例教程

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  4. Flux --> Redux --> Redux React 入门 基础实例使用

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  5. react 创建项目 sass router redux

    ​ 创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...

  6. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. [Redux] React Todo List Example (Toggling a Todo)

    /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...

  9. [Redux] React Todo List Example (Adding a Todo)

    Learn how to create a React todo list application using the reducers we wrote before. /** * A reduce ...

随机推荐

  1. Django连接oracle数据库的那些问题

    环境: windows 7 64位 python 3.6.5 32位 oracle客户端11.2 32位 django1.11.20 (django2.x版本不支持oracle客户端11g了) cx_ ...

  2. Skynet服务热点火焰图分析

    最近花了一周时间对场景服务进行热点分析,利用以前的火焰图工具做了一点微小的贡献,分享下心得(仓库地址在https://github.com/spin6lock/skynet_systemtap_set ...

  3. 前端框架Angular、react、vue在github上的数据统计-2018-05

    2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...

  4. c++学习中的疑问

    1.关于iostream头文件中的cout对象没有包含对string的<<操作符重载函数 测试代码: #include<iostream> using namespace st ...

  5. Python3.7 练习题(三) 将指定目录下的图片进行批量尺寸大小处理

    # 将指定目录下的图片进行批量尺寸大小处理 #修改图片尺寸 导入Image os 快捷键 alt+enter import os from PIL import Image def process_i ...

  6. spring查看生成的cglib代理类源码详解

    1.让程序阻塞(抛出异常会导致程序结束,所以在抛出异常之前阻塞) 2. windows控制台 cd到jdk目录下的lib目录,找到sa-jdi.jar 执行: java -classpath sa-j ...

  7. Go学习之初出茅庐

    在一个月黑风高的夜晚,机缘巧合与Go语言一面之缘,被她的简洁.灵活.高效所吸引,让我有深入学习的冲动,现在开始我的成长之路吧.

  8. jdk的下载

    1.打开oracle的官网https://www.oracle.com/index.html 2.拖动页面到最后,找到java for developer 并点击 3. 4.拖动到最后找到java A ...

  9. 查看那些进程使用了swap

    https://blog.csdn.net/xiangliangyu/article/details/8213127$ sudo pacman -S iotop https://blog.longwi ...

  10. 基于mpvue搭建微信小程序

    mpvue是美团开源的一套语法,语法与vue.js一致,快速开发小程序的前端框架.框架基于vue.js核心,修改了vue.js的runtime和compiler实现,使用此框架,开发者可以完全使用vu ...