React-Redux使用方法
React-Redux使用方法
理解
在React项目中使用react-redux,可以让你更方便的使用redux,原理是在index.js
中注册app时用一个<Povider>
标签嵌套,把你的App.js变Provideer
的子组件,将所有的state
以props
的形式传给<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使用方法的更多相关文章
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- 【原】react+redux实战
摘要:因为最近搞懂了redux的异步操作,所以觉得可以用react+redux来做一个小小的项目了,以此来加深一下印象.切记,是小小的项目,所以项目肯定是比较简单的啦,哈哈. 项目效果图如图所示:(因 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React Redux Sever Rendering实战
# React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...
随机推荐
- AI学习吧-购物车-添加商品接口
create接口流程 需求:向购物车添加商品 流程:写shopping_cart路由--->写ShoppingCart视图函数--->使用Authuser校验用户是否登录--->首先 ...
- nodejs 如何获取页面get、post传递过来的参数
如果是get传递参数,可以直接使用 request.query.name 如果是post 需要借助body-parser 首先引入bodyParser = require('body-parser') ...
- 论文阅读笔记三十三:Feature Pyramid Networks for Object Detection(FPN CVPR 2017)
论文源址:https://arxiv.org/abs/1612.03144 代码:https://github.com/jwyang/fpn.pytorch 摘要 特征金字塔是用于不同尺寸目标检测中的 ...
- 步步為營-95-MyMVC 1.0
說明:通過自己編寫MyMVC以便於對MVC內容實現機制有更深刻的認識 1.1:創建MyMVC項目,刪除無關引用,只保留system 和 system.web.同時該項目中以後添加一些文件后也要刪除無關 ...
- 读C#开发实战1200例子记录-2017年8月14日10:03:55
C# 语言基础应用,注释 "///"标记不仅仅可以为代码段添加说明,它还有一项更重要的工作,就是用于生成自动文档.自动文档一般用于描述项目,是项目更加清晰直观.在VisualStu ...
- rabbitmq的安装与使用
1.RabbitMQ的安装,rabbitmq为erlang语言开发,所以先安装erlang语言开发包,现在电脑一般都是64位的,所以下载64位的都行了.红色框可以选择版本,箭头选择64位的进行下载.下 ...
- jQuery实用工具集
插件描述:jQuery实用工具集,该插件封装了常用功能,如序列化表单值获取地址栏参数window对象操作等 此工具集包含判断浏览器,判断浏览终端,获取地址栏参数,获取随机数,数据校验等常用操作功能 引 ...
- 开始写博客,学习Linq(1)
摘自<linq实战>原文: 软件很简单.它可以归结为两件事情:代码和数据. 开发软件却并非那么简单,其中很重要的一项任务就是编写处理数据的代码. 无论选择了哪种语言,在程序开发得某个时候你 ...
- EF大数据批量处理 EntityFrameWork下增加扩展方法
为EF操作方法添加扩展方法 BulkInsert 大致设计方式为 通过当前DbContext 获取当前连接字符串,调用连接字符串获取当前实体的所有字段及字段属性,映射到DataTable中 在调用Sy ...
- stl测试
以下测试都在学校电脑进行 我觉得应该比考试机器慢一点.. 1.map map的速度测出来和放入数值大小有很大关系 比如 #include <bits/stdc++.h> using nam ...