React-Redux使用方法


理解


在React项目中使用react-redux,可以让你更方便的使用redux,原理是在index.js中注册app时用一个<Povider>标签嵌套,把你的App.js变Provideer的子组件,将所有的stateprops的形式传给<App/>

代码


App.js

/*
* @Author: YooHoeh
* @Date: 2018-07-17 09:42:21
* @Last Modified by: YooHoeh
* @Last Modified time: 2018-07-17 15:11:30
* @Description:
*/ import React, { Component } from "react";
import { connect } from "react-redux";
import { deletItem, addItem, inputValueChange } from "./store/actionCreator"; const TodoList = props => {
const { inputValue, handleInputChange, handleClick, handleDelItem } = props;
return (
<div>
<div>
<input value={inputValue} onChange={handleInputChange} />
<button onClick={handleClick}>Submit</button>
</div>
<ul>
{props.list.map((item, index) => {
return (
<li key={index} onClick={() => handleDelItem(index)}>
{item}{" "}
</li>
);
})}
</ul>
</div>
);
}; const mapStateToProps = state => {
return {
inputValue: state.inputValue,
list: state.list
};
}; const mapDispatchToProps = dispatch => {
return {
handleInputChange(e) {
const action = inputValueChange(e.target.value);
dispatch(action);
},
handleClick() {
const action = addItem();
dispatch(action);
},
handleDelItem(index) {
const action = deletItem(index);
dispatch(action);
}
};
}; // 导出connect方法将Todolis和store做连接
// 原理是ProVider将state和dispatch以props的方式传给Todolist
// 将UI组件连接成容器组件
export default connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);

index.js

/*
* @Author: YooHoeh
* @Date: 2018-07-17 09:53:55
* @Last Modified by: YooHoeh
* @Last Modified time: 2018-07-17 10:23:50
* @Description:
*/ import React from "react";
import ReactDOM from "react-dom";
import TodoList from "./TodoList";
import { Provider } from "react-redux";
import store from "./store"; const App = (
<Provider store={store}>
{/*这样的话里面的所有组件都可以获取Store里面的state了*/}
<TodoList />
</Provider>
); ReactDOM.render(App, document.getElementById("root"));

React-Redux使用方法的更多相关文章

  1. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  2. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  3. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  4. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

  5. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  6. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  7. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  8. 【原】react+redux实战

    摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...

  9. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  10. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

随机推荐

  1. iptables-snat-dnat-设置

    nat internet iptables -t nat -A POSTROUTING -s 192.168.0.0/255.255.255.0 -o eth1 -j SNAT --to-source ...

  2. JAVA二分搜索树

    二叉树: 和链表一样,动态数据结构. 二叉树具有唯一根节点 二叉树具有天然的递归结构 二分搜索树是二叉树 二分搜索树的每个节点的值: 1.大于其左子树的所有节点的值 2.小于其右子树的所有节点的值 每 ...

  3. VS2017使用文档

    参考链接:https://docs.microsoft.com/zh-cn/visualstudio/debugger/?view=vs-2017

  4. 新版的K8S中的flannel.yaml文件中要注意的细节

    部署flannel作为k8s中的网络插件,yaml文件都大小同异. 但在要注意以下细节. 以前,只需要前面master判断. 现在也需要有not-ready状态了. tolerations: - ke ...

  5. C#学习-面向对象语言都有类

    面向对象语言的一个基本特征是它们都有类,类是C#(这类语言)中的一种复杂数据类型. 类代表一组具有公共属性和行为的对象. 在C#中定义一个类是非常简单的,只需使用class关键字并按格式来定义即可. ...

  6. [转] git rm与git rm --cached

    当我们需要删除暂存区或分支上的文件, 同时工作区也不需要这个文件了, 可以使用 git rm file_path 当我们需要删除暂存区或分支上的文件, 但本地又需要使用, 只是不希望这个文件被版本控制 ...

  7. Docker docker-compose安装

    一.在服务器上敲下面命令即可,将需要的版本号修改一下即可 sudo curl -L "https://github.com/docker/compose/releases/download/ ...

  8. playbook role应用

    参考: ansible中文权威指南 1. 动态Include 结合when等判断,在满足某个条件的时候加载. - include: test.yml when: ...... handler 中也可以 ...

  9. 亲和串 kmp

    Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全世界科学家思考的问题,同样的问题Eddy也一直在思考,因为他在很小的时候就知道亲和串如何判断了,但是发现 ...

  10. 老虎ji 剪枝模拟

    Problem Description “在赌场里,基本原则就是让他们玩下去以及让他们再来玩.他们玩得越久,他们会输的越多,最后,我们会得到一切.”(摘自1995年的电影Casino) 你正在一家赌场 ...