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 ...
随机推荐
- jmeter IP欺骗功能
使用过loadrunner的同学,应该都了解有个IP欺骗功能,jmeter遇到类似需求怎样实现呢? 环境:windows7,jdk1.8,jmeter3.1 使用IP欺骗功能前提是本地有多个可用IP, ...
- 饮冰三年-人工智能-linux-03 Linux文件管理(权限管理+归档+压缩)
1:对文件的权限管理 drwxr-xr-x. 最后一个.表示在安全情况下创建的.selinux a: d表示目录:-表示普通文件:l表示快捷方式:b设备文件 b:- 属主的权限 r:读权限:w:写权限 ...
- Android NDK笔记
目录 Android NDK笔记 AOSP Android repository Android SDK / SDK Tools NDK cmake && ninja lldb adb ...
- base | Thread类、ThreadData结构体 、CurrentThread命名空间
__thread __thread是GCC内置的线程局部存储设施,存取效率可以和全局变量相比.__thread变量每一个线程有一份独立实体,各个线程的值互不干扰.可以用来修饰那些带有全局性且值可能变, ...
- MySql-8.0.12 安装教程
MySql-8.0.12 安装教程随笔https://www.cnblogs.com/CrazyDemo/p/9409995.html MySQL 安装https://m.runoob.com/mys ...
- Task.Run()任务执行
1)Task本身就是异步执行的(4.5的那个类). 2)控制数量和终止线程问题可以考虑这个模式: static async void RunAsync() { CancellationTokenSou ...
- mysql如何添加一个表的外键
1:创建一个父表,主键作为子表的外键: create table province( pId int primary key auto_increment, pName varchar() ); 2: ...
- 【BZOJ4712】洪水
题解: 注意题目说了每个点的权值只能增加 每个点的dp方程比较简单 min(v[i],sum[i]) 那么我们考虑如果v[i]增加那么上面使用sum[i]的会带来影响 暴力的做就是一个个往上查然后修改 ...
- 支付宝 app支付 沙盘使用
文档说明 沙箱测试: App支付沙箱接入注意点 1.app支付支持沙箱接入:在沙箱调通接口后,必须在线上进行测试与验收,所有返回码及业务逻辑以线上为准:2.app支付只支持余额支付,不支持银行卡.余额 ...
- AtCoder Grand Contest 11~17 做题小记
原文链接https://www.cnblogs.com/zhouzhendong/p/AtCoder-Grand-Contest-from-11-to-20.html UPD(2018-11-16): ...