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. Git应用—03分支管理和冲突解决(转载)

    Git 分支管理和冲突解决 https://www.cnblogs.com/mengdd/p/3585038.html 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. ...

  2. Visualforce控制器

    Visualforce框架是遵循MVC结构的.Visualforce页面代表了"视图"部分,Salesforce的各种对象代表了"模型"部分,而Apex则代表了 ...

  3. C++知识回顾之__stdcall、__cdcel和__fastcall三者的区别

    __stdcall.__cdecl和__fastcall是三种函数调用协议,函数调用协议会影响函数参数的入栈方式.栈内数据的清除方式.编译器函数名的修饰规则等. 调用协议常用场合 __stdcall: ...

  4. 移植marvell poncat3 demo板的总结

    1.arm cpu自带的bootrom, 已经初始化好串口.SPI等外设,只要硬件设置好从SPI FLASH启动,则cpu自带的bootrom会自动打印出一些信息,显示出从SPI FLASH启动,驱动 ...

  5. 【redis专题(2)】命令语法介绍之string

    REDIS有5大数据结构:string,link,sortedset,sets,hash. 这5个结构我将用5篇文章来记录各自是怎么用的,然后再用一篇文章来说一下各自的应用场景: 更多语法请参考: h ...

  6. javascript避免dom事件重复触发

    /** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...

  7. 【PAT】B1084 外观数列(20 分)(纯C)

    第一层循环,用来循环计算第几个元素 第二层用来计算当前元素的下一个 #include<stdio.h> #include<string.h> char aaa[100000] ...

  8. ccf-20170303--Markdown

    我的想法如下图: 代码和题目如下: 问题描述 试题编号: 201703-3 试题名称: Markdown 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 Markdown 是一 ...

  9. IntelliJ IDEA 项目结构旁边出现 0%classes,0% lines covered

    不知道一不小心点到哪里,项目变成如下形式 使用ctrl +  Alt + F6弹出如下框,取消勾选-->点击Show Selected就可以去掉了 官网解释

  10. centos 上安装phpstorm

    phpstorm在centos上运行依赖JDK,所以先安装JDK环境. 假如是centos自带的openjdk,直接卸载,不支持phpstorm. 下载jdk-7u45-linux-i586.tar. ...