1.redux:

function reducer(state=-,action)

{

switch(action.type)

{

case '':

return ...

case '':

return ...

default:

return ...

}

}

const store = createStore(reducer)

function listener(){

const current = store.getState()

console.log(current);

}

store.subscribe(listener)

store.dispatch({type:'...'})

2.redux配合react一起使用:

index.js

function render()

{

ReactDom.render(<App store={store}/>,document.getElementById('root'))

}

store.subscribe(render)

App.js: 里面是组件和store

index.reducer.js 里面是reducer 和 actioncreator

3.使用redux-thunk让redux处理异步:

一.安装redux-thunk

二.使用applyMiddleware开启thunk中间件

三.Action可以返回函数,使用dispatch提交action

首先开启中间件:

引入thunk:

然后创建store

调试工具:

4.使用react-redux:

npm install react-redux –save

忘记subscribe,只使用reducer、action、和dispatch

·Provier组件在应用最外层,传入store即可,只用一次

·Connect负责从外部获取组建需要的参数

index.js:

App.js(这是一个组件)

*用装饰器的方式书写:

Redux 总结的更多相关文章

  1. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

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

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

  6. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

  7. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  8. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

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

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

  10. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. 国庆 day 7 下午

    思路:见博客. #include<iostream> #include<cstdio> #include<cstring> #include<algorith ...

  2. Redis介绍以及安装具体解释

    redis是一个key-value存储系统. 和Memcached类似.它支持存储的value类型相对很多其它,包含string(字符串).list(链表).set(集合).zset(sorted s ...

  3. [Angular] Configure an Angular App at Compile Time with the Angular CLI

    Compile time configuration options allow you to provide different kind of settings based on the envi ...

  4. Cocos2dx学习报告2

    记录二:创建项目,其名曰DFJ(仿照微信打飞机) 上一个记录我们说到开发环境的配置以及如何去建立自己的项目. 如今我们就通过之前说所的方法来建立一个项目.这里我就不再截图了. 建立了自己的项目之后,我 ...

  5. oracle新手随记10

    1. unpivot注意点:select new_col from (select ename,job,to_char(sal) as sal,null as c from emp)         ...

  6. H5学习_番外篇_PHP数据库操作

    1. 文件操作 1.1 打开关闭文件 fopen() resource fopen ( string filename, string mode [, bool use_include_path [, ...

  7. vs2012碰到生成时报该错误:项目中不存在目标 “XXXXXX”

    vs2012碰到生成时报该错误:项目中不存在目标 "XXXXXX" 首先打开project文件,找到 以下信息: <Import Project="$(MSBuil ...

  8. hdoj--1408--盐水的故事(技巧)

    盐水的故事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  9. React ----- 路由懒加载的几种实现方案

    传统的两种方式 1.import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块 ...

  10. metasploit.meterpreter学习笔记(博主推荐)

    Metasploit学习笔记(博主推荐) 继续上面的博客 metasploit.meterpreter的基本使用: 首先来获取当前系统(即xp)下的正在运行的一些进程 获得进程之后,我们通过migra ...