react-redux可以方便在react中使用redux,我们就可以忘记subscribe,只需要记住reducer,action和dispatch就可以了。react-redux提供Provider和connect两个接口。

  • Provider组件应该在应用最外层,传入store即可,只用一次。
  • Connect负责从外部获取组件需要的参数。
  • Connect可以用装饰器的方式来写。

创建stroe的时候,把原本的<Todolist/>包裹在Provider里。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './TodoList.js';
//定义一个组件,就是一段jsx
//Provider 链接了store,那么Provider里所有的组件,也都能获取到store里的内容
const App = (
<Provider store={store}>
<TodoList/>
</Provider>
);
ReactDOM.render(App, document.getElementById('root'));

在组件里导出组件的时候换种写法,要用connect。理解为让TodoList与store做链接,逻辑规则在mapStateToProps和mapDispatchToProps里定,TodoList是个ui组件,导出的是个普通组件。

mapStateToProps:mapStateToProps把store里的数据映射到组件里,变成组件的props。它接受一个state做参数,返回一个对象。

mapDispatchToProps:把store.dispatch方法映射到props上,变成组件的props。它接受接受一个dispatch 做参数,返回一个对象

import React  from 'react';
import { connect } from 'react-redux';
const TodoList=(props)=>{
const { inputValue , changeInpuValue ,btnClick , list , itemDelete}=props;
return(
<div>
<input type="text" value={inputValue} onChange={changeInpuValue}/>
<button onClick={btnClick}>提交</button>
<ul>
{
list.map((item,index)=>{
return <li key={index} onClick={itemDelete}>{item} </li>
})
}
</ul>
</div>
);
};
/*mapStateToProps把store里的数据映射到组件里,变成组件的props,接受一个state做参数,返回一个对象*/
const mapStateToProps=(state)=>{
return{
inputValue:state.inputValue,
list:state.list
}
}
/*store.dispatch方法挂载到props上,组件里的props如何对store做修改,接受一个dispatch 做参数,返回一个对象*/
const mapDispatchToProps=(dispatch)=>{
return{
changeInpuValue(e){
const action={
type:'change_input_value',
value:e.target.value
}
dispatch(action)
},
btnClick(){
const action={
type:'btn_click'
}
dispatch(action)
},
itemDelete(e){
console.log(e);
}
}
}
/*让TodoListu与store做链接,规则在mapStateToProps里边*/
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

  

React-使用react-redux的更多相关文章

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

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

  2. 在React中使用Redux

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

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

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

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

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

  5. react系列(五)在React中使用Redux

    上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...

  6. React学习之redux

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

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

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

  8. react中使用redux简易案例讲解

    为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...

  9. [RN] React Native 使用 Redux 比较详细和深刻的教程

    React Native 使用 Redux 比较详细和深刻的教程 React Native 使用 Redux https://www.jianshu.com/p/06fc18cef56a http:/ ...

  10. React项目使用Redux

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

随机推荐

  1. IIS http 错误 401.3 - unauthorized

    iis http 错误 401.3 - unauthorized 向物理目录添加iis_iusrs用户权限.

  2. loadrunner录制的时候如何应对验证码的问题解决办法?

    对这个问题,我个人的看法是,基本上可以考虑从三个途径来解决该问题: 1.第一种方法,也是最容易想到的,在被测系统中暂时屏蔽验证功能,也就是说,临时修改应用,无论用户输入的是什么验证码,都认为是正确的. ...

  3. mybatis学习--缓存(一级和二级缓存)

    声明:学习摘要! MyBatis缓存 我们知道,频繁的数据库操作是非常耗费性能的(主要是因为对于DB而言,数据是持久化在磁盘中的,因此查询操作需要通过IO,IO操作速度相比内存操作速度慢了好几个量级) ...

  4. 线程:生命周期、实现方式、start()和run()的区别!

    1.线程的生命周期 要想实现多线程,必须在主线程中创建新的线程对象.Java语言使用Thread类及其子类的对象来表示线程,在它的 一个完整的生命周期中通常要经历如下的五种状态: 新建:当一个Thre ...

  5. 04LaTeX学习系列之---overleafz在线编辑平台的使用

    目录 目录 前言 (一)overleaf的认识 1.由来: 2.优点: 3.界面: (二)编译与查看 1.选择编译器 2.编译 (三)基本的设置与操作 1.基本设置 2.基本操作 目录 本系列是有关L ...

  6. Hp电脑开机报错:no boot disk has been detected or the disk has failed

    hp主机开机报错no boot disk has been detected  or the disk has failed,重启之后没有作用,开机之后仍然是同样界面.考虑是硬盘问题,按ESC+F10 ...

  7. Java设计模式之四 ----- 适配器模式和桥接模式

    前言 在上一篇中我们学习了创建型模式的建造者模式和原型模式.本篇则来学习下结构型模式的适配器模式和桥接模式. 适配器模式 简介 适配器模式是作为两个不兼容的接口之间的桥梁.这种类型的设计模式属于结构型 ...

  8. 计算机基础-BIOS

    BIOS--硬件和软件的纽带(Basic Input Output System) 1.含义:基本的输入输出系统,它是一组固化到计算机内主板上的一个ROM存储芯片上的程序 2.性质:它保存着计算机最重 ...

  9. Nginx禁止目录执行php文件权限

    location ~ /dir/.*.(php|php5)?$ { deny all; } 禁止dir目录执行php文件权限 .csharpcode, .csharpcode pre { font-s ...

  10. Difference Between InnoDb and MyISAM(个人觉着是好文章,简单易懂,推荐看)

    原文地址:http://acmeextension.com/difference-between-innodb-and-myisam/ MyISAM and InnoDB are the most c ...