Redux 简明教程（老纳只能看明白这篇教程，其它的都太高深了）
我的图书馆
Redux 简明教程（老纳只能看明白这篇教程，其它的都太高深了）
原文链接（保持更新）：写在前面本教程深入浅出，配套 简明教程、（源码精读）以及文档注释丰满的&&等一条龙服务§ 为什么要用 Redux当然还有&、、&等状态管理库可供选择抛开需求讲实用性都是耍流氓，因此下面由我扮演您那可亲可爱的产品经理⊙ 需求 1：在控制台上记录用户的每个动作不知道您是否有后端的开发经验，后端一般会有记录访问日志的中间件例如，在 Express 中实现一个简单的 Logger 如下：var loggerMiddleware = function(req, res, next) {
console.log('[Logger]', req.method, req.originalUrl)
app.use(loggerMiddleware)每次访问的时候，都会在控制台中留下类似下面的日志便于追踪调试：[Logger] GET
[Logger] POST /login
[Logger] GET
/user?uid=10086
如果我们把场景转移到前端，请问该如何实现用户的动作跟踪记录？我们可能会这样写：/** jQuery **/
$('#loginBtn').on('click', function(e) {
console.log('[Logger] 用户登录')
$('#logoutBtn').on('click', function() {
console.log('[Logger] 用户退出登录')
/** MVC / MVVM 框架（这里以纯 Vue 举例） **/
methods: {
handleLogin () {
console.log('[Logger] 用户登录')
handleLogout () {
console.log('[Logger] 用户退出登录')
}上述 jQuery 与 MV* 的写法并没有本质上的区别记录用户行为代码的侵入性极强，可维护性与扩展性堪忧⊙ 需求 2：在上述需求的基础上，记录用户的操作时间哼！最讨厌就是改需求了，这种简单的需求难道不是应该一开始就想好的吗？呵呵，如果每位产品经理都能一开始就把需求完善好，我们就不用加班了好伐显然地，前端的童鞋又得一个一个去改（当然 编辑器 / IDE 都支持全局替换）：/** jQuery **/
$('#loginBtn').on('click', function(e) {
console.log('[Logger] 用户登录', new Date())
$('#logoutBtn').on('click', function() {
console.log('[Logger] 用户退出登录', new Date())
/** MVC / MVVM 框架（这里以 Vue 举例） **/
methods: {
handleLogin () {
console.log('[Logger] 用户登录', new Date())
handleLogout () {
console.log('[Logger] 用户退出登录', new Date())
}而后端的童鞋只需要稍微修改一下原来的中间件即可：var loggerMiddleware = function(req, res, next) {
console.log('[Logger]', new Date(), req.method, req.originalUrl)
app.use(loggerMiddleware)⊙ 需求 3：正式上线的时候，把控制台中有关 Logger 的输出全部去掉难道您以为有了 UglifyJS，配置一个&drop_console: true&就好了吗？图样图森破，拿衣服！请看清楚了，仅仅是去掉有关 Logger 的&console.log，其他的要保留哦亲~~~于是前端的童鞋又不得不乖乖地一个一个注释掉（当然也可以设置一个环境变量判断是否输出，甚至可以重写&console.log）而我们后端的童鞋呢？只需要注释掉一行代码即可：// app.use(loggerMiddleware)，真可谓是不费吹灰之力⊙ 需求 4：正式上线后，自动收集 bug，并还原出当时的场景收集用户报错还是比较简单的，，然后根据 Source Map 定位到源码（但一般查不出什么）但要完全还原出当时的使用场景，几乎是不可能的。因为您不知道这个报错，用户是怎么一步一步操作得来的就算知道用户是如何操作得来的，但在您的电脑上，测试永远都是通过的（不是我写的程序有问题，是用户用的方式有问题）相对地，后端的报错的收集、定位以及还原却是相当简单。只要一个 API 有 bug，那无论用什么设备访问，都会得到这个 bug还原 bug 也是相当简单：把数据库备份导入到另一台机器，部署同样的运行环境与代码。如无意外，bug 肯定可以完美重现在这个问题上拿后端跟前端对比，确实有失公允。但为了鼓吹 Redux 的优越，只能勉为其难了实际上 jQuery / MV* 中也能实现用户动作的跟踪，用一个数组往里面&push&用户动作即可但这样操作的意义不大，因为仅仅只有动作，无法反映动作前后，应用状态的变动情况※ 小结为何前后端对于这类需求的处理竟然大相径庭？后端为何可以如此优雅？原因在于，后端具有统一的入口与统一的状态管理（数据库），因此可以引入中间件机制来统一实现某些功能多年来，前端工程师忍辱负重，操着卖白粉的心，赚着买白菜的钱，一直处于程序员鄙视链的底层于是有大牛就把后端 MVC 的开发思维搬到前端，将应用中所有的动作与状态都统一管理，让一切有据可循使用 Redux，借助&&可以实现出“华丽如时光旅行一般的调试效果”实际上就是开发调试过程中可以撤销与重做，并且支持应用状态的导入和导出（就像是数据库的备份）而且，由于可以使用日志完整记录下每个动作，因此做到像 Git 般，随时随地恢复到之前的状态由于可以导出和导入应用的状态（包括路由状态），因此还可以实现前后端同构（服务端渲染）当然，既然有了动作日志以及动作前后的状态备份，那么还原用户报错场景还会是一个难题吗？§ Store首先要区分&store&和&statestate&是应用的状态，一般本质上是一个普通对象例如，我们有一个 Web APP，包含 计数器 和 待办事项 两大功能那么我们可以为该应用设计出对应的存储数据结构（应用初始状态）：/** 应用初始 state，本代码块记为 code-1 **/
counter: 0,
}store&是应用状态&state&的管理者，包含下列四个函数：getState() # 获取整个 statedispatch(action) # ※ 触发 state 改变的【唯一途径】※subscribe(listener) # 您可以理解成是 DOM 中的 addEventListenerreplaceReducer(nextReducer) # 一般在 Webpack Code-Splitting 按需加载的时候用二者的关系是：state = store.getState()Redux 规定，一个应用只应有一个单一的&store，其管理着唯一的应用状态&stateRedux 还规定，不能直接修改应用的状态&state，也就是说，下面的行为是不允许的：var state = store.getState()
state.counter = state.counter + 1 // 禁止在业务逻辑中直接修改 state若要改变&state，必须&dispatch&一个&action，这是修改应用状态的不二法门现在您只需要记住&action&只是一个包含&type&属性的普通对象即可例如&{ type: 'INCREMENT' }上面提到，state&是通过&store.getState()&获取，那么&store&又是怎么来的呢？想生成一个&store，我们需要调用 Redux 的&createStore：import { createStore } from 'redux'
const store = createStore(reducer, initialState) // store 是靠传入 reducer 生成的哦！现在您只需要记住&reducer&是一个&函数，负责更新并返回一个新的&state而&initialState&主要用于前后端同构的数据同步（详情请关注 React 服务端渲染）§ Action上面提到，action（动作）实质上是包含&type&属性的普通对象，这个&type&是我们实现用户行为追踪的关键例如，增加一个待办事项 的&action&可能是像下面一样：/** 本代码块记为 code-2 **/
type: 'ADD_TODO',
payload: {
content: '待办事项1',
completed: false
}当然，action&的形式是多种多样的，唯一的约束仅仅就是包含一个&type&属性罢了也就是说，下面这些&action&都是合法的：/** 如下都是合法的，但就是不够规范 **/
type: 'ADD_TODO',
content: '待办事项1',
completed: false
type: 'ADD_TODO',
abcdefg: {
content: '待办事项1',
completed: false
}虽说没有约束，但最好还是遵循如果需要新增一个代办事项，实际上就是将&code-2&中的&payload&“写入”&到&state.todos&数组中（如何“写入”？在此留个悬念）：/** 本代码块记为 code-3 **/
counter: 0,
content: '待办事项1',
completed: false
}刨根问底，action&是谁生成的呢？⊙ Action CreatorAction Creator 可以是同步的，也可以是异步的顾名思义，Action Creator 是&action&的创造者，本质上就是一个函数，返回值是一个&action（对象）例如下面就是一个 “新增一个待办事项” 的 Action Creator：/** 本代码块记为 code-4 **/
var id = 1
function addTodo(content) {
type: 'ADD_TODO',
payload: {
content: content, // 待办事项内容
completed: false
// 是否完成的标识
}将该函数应用到一个表单（假设&store&为全局变量，并引入了 jQuery ）：&--! 本代码块记为 code-5 --&
&input type="text" id="todoInput" /&
&button id="btn"&提交&/button&
$('#btn').on('click', function() {
var content = $('#todoInput').val() // 获取输入框的值
var action = addTodo(content) // 执行 Action Creator 获得 action
store.dispatch(action) // 改变 state 的不二法门：dispatch 一个 action！！！
&/script&在输入框中输入 “待办事项2” 后，点击一下提交按钮，我们的&state&就变成了：/** 本代码块记为 code-6 **/
counter: 0,
content: '待办事项1',
completed: false
content: '待办事项2',
completed: false
}通俗点讲，Action Creator 用于绑定到用户的操作（点击按钮等），其返回值&action&用于之后的&dispatch(action)刚刚提到过，action&明明就没有强制的规范，为什么&store.dispatch(action)&之后，Redux 会明确知道是提取&action.payload，并且是对应写入到&state.todos&数组中？又是谁负责“写入”的呢？悬念即将揭晓...§ ReducerReducer 必须是同步的纯函数用户每次&dispatch(action)&后，都会触发&reducer&的执行reducer&的实质是一个函数，根据&action.type&来更新&state&并返回&nextState最后会用&reducer&的返回值&nextState&完全替换掉原来的&state注意：上面的这个 “更新” 并不是指&reducer&可以直接对&state&进行修改Redux 规定，须先复制一份&state，在副本&nextState&上进行修改操作例如，可以使用 lodash 的&cloneDeep，也可以使用&Object.assign / map / filter/ ...&等返回副本的函数在上面 Action Creator 中提到的 待办事项的&reducer&大概是长这个样子 (为了容易理解，在此不使用 ES6 /&)：/** 本代码块记为 code-7 **/
var initState = {
counter: 0,
function reducer(state, action) {
// ※ 应用的初始状态是在第一次执行 reducer 时设置的 ※
if (!state) state = initState
switch (action.type) {
case 'ADD_TODO':
var nextState = _.cloneDeep(state) // 用到了 lodash 的深克隆
nextState.todos.push(action.payload)
return nextState
// 由于 nextState 会把原 state 整个替换掉
// 若无修改，必须返回原 state（否则就是 undefined）
return state
}通俗点讲，就是&reducer&返回啥，state&就被替换成啥§ 总结store&由 Redux 的&createStore(reducer)&生成state&通过&store.getState()&获取，本质上一般是一个存储着整个应用状态的对象action&本质上是一个包含&type&属性的普通对象，由 Action Creator (函数) 产生改变&state&必须&dispatch&一个&actionreducer&本质上是根据&action.type&来更新&state&并返回&nextState&的函数reducer&必须返回值，否则&nextState&即为&undefined实际上，state&就是所有&reducer&返回值的汇总（本教程只有一个&reducer，主要是应用场景比较简单）Action Creator =&&action&=&&store.dispatch(action)&=&&reducer(state, action)&=&&原 state&state = nextState⊙ Redux 与传统后端 MVC 的对照Redux传统后端 MVCstore数据库实例state数据库中存储的数据dispatch(action)用户发起请求action: { type, payload }type&表示请求的 URL，payload&表示请求的数据reducer路由 + 控制器（handler）reducer&中的&switch-case&分支路由，根据&action.type&路由到对应的控制器reducer&内部对&state&的处理控制器对数据库进行增删改操作reducer&返回&nextState将修改后的记录写回数据库§ 最简单的例子 (&&)&!DOCTYPE html&
&script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"&&/script&
/** Action Creators */
function inc() {
return { type: 'INCREMENT' };
function dec() {
return { type: 'DECREMENT' };
function reducer(state, action) {
// 首次调用本函数时设置初始 state
state = state || { counter: 0 };
switch (action.type) {
case 'INCREMENT':
return { counter: state.counter + 1 };
case 'DECREMENT':
return { counter: state.counter - 1 };
return // 无论如何都返回一个 state
var store = Redux.createStore(reducer);
console.log( store.getState() ); // { counter: 0 }
store.dispatch(inc());
console.log( store.getState() ); // { counter: 1 }
store.dispatch(inc());
console.log( store.getState() ); // { counter: 2 }
store.dispatch(dec());
console.log( store.getState() ); // { counter: 1 }
&/html&由上可知，Redux 并不一定要搭配 React 使用。Redux 纯粹只是一个状态管理库，几乎可以搭配任何框架使用（上述例子连 jQuery 都没用哦亲）
喜欢该文的人也喜欢如何理解Redux的流程 - 简书
如何理解Redux的流程
最近需要把公司项目重构，于是把react redux断断续续看了2个星期，才大致清楚了流程和用法，感觉初入还是有一些坑的。
推荐阅读顺序
react 推荐，这是最简单的react教程 ，但并没有使用es6的语法来编写。
webpack 和,如果不使用webpack打包的话，解析和浏览器兼容的问题会很大
reflux 可以稍微了解一些，帮助了解redux结构
Redux 虽然阮一峰的教程也好，但是还是更推荐 ,看理论上的东西不如跟着文档的教程走一下，虽然这个文档很详细了，但是我还是花了一点时间才能理顺。
注意：Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。尽管如此，Redux 还是和
这类框架搭配起来用最好！
使用react之后尽量可以慢慢抛弃jquery了
初看 ，依然有很多不明白的地方，特别是store,reducer,action之间的联系。好在后来慢慢熟悉了。
我眼里的react+redux开发步骤：(以重构项目为例)
把页面需要呈现的UI划分为不同的组件，然后依次用react改写之前的html页面中jquery插件和各个UI部分。
组织state结构
state其实是最容易但是确实最难理解的一部分，state可以看做是一个虚拟的树结构，它并不像一个实体对象，需要事先全部声明有哪些类型有哪些字段，而是在你编写组件以及action和reducer过程中会动态根据你的定义而改变，当然你自己得清楚你的state整个结构 并且最好是以一个json的格式写下来，在重构的过程中不断的修改和完善。
action相对容易理解，我把它比作一个 好的函数名(坏的函数名:abc(){} ) 类似 getElementByID("id")，为什么不是函数，而是函数名字，因为 action只做了函数名该做的事情，只描述给我们听:如果调用该action 会发生生么。这里告诉我们即将会发生的就是 根据id获取该元素。
如果说action的功能是函数名，那reducer就是实际操作者了，所以reducer就是函数的实现步骤。因此，state的状态在这里进行改变，要注意的是，并不是用我们所理解的“重新赋值”来改变state，而是根据你需要的功能重新生成一个state，把新的state返回出来。这里涉及到一个纯净函数pure function的思想，我们只要知道在reducer里面不要进行修改赋值，这样的话state永远要么是之前的状态要么是新的状态，而不会有修改错误的状态了。
之前讲的都比较容易懂，那什么是store?
store就是联系action和reducer的东西，我们可以通过传入写好的reducer来创建一个store， 然后我们通过store来执行需要执行的action，因此他们之间就联系在了一起，而此时你根本不需要去管view该如何渲染，因为在使用react编写ui组件的时候已经把组件和state联系在了一起。所以redux的流程就是：
使用通过reducer创建出来的Store发起一个Action，reducer会执行相应的更新state的方法，每当state更新之后，view会根据state做出相应的变化!
注意：再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 而不是创建多个 store。
流程就是这样了
理解并不难，难的是动手~
近期更新本人新推出 react 的 state 管理框架 pastate.js,
让我们可以用赋值=的方式来更新 state 值！欢迎关注和star，感谢~ 前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达...
学习必备要点： 首先弄明白，Redux在使用React开发应用时，起到什么作用——状态集中管理 弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念 在React中集成Redux：redux + react-redux（多了一个概念——s...
做React需要会什么？ react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redu...
一、CMS管理系统功能 CMS是ContentManagementSystem的缩写，意为&内容管理系统&。 CMS都有可能包括些什么？ 隐藏在内容管理系统(CMS)之后的基本思想是分离内容的管理和设计。页面设计存储在模板里，而内容存储在数据库或独立的文件中。 当一个用户请...
前言 本文 有配套视频，可以酌情观看。 文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我讨论。 文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关，如文中内容对您造成不便，烦请联系
处理，谢谢。 ...
1 那是一个寻常得不能再寻常的一天，爸爸和儿子在超市里玩着他们常玩的游戏。爸爸面朝前，两只手背过来牵着儿子，爸爸步子较大较缓，儿子在后面紧紧跟着。玩得兴起，儿子身体向后倾倒使劲地拽住爸爸，却没料到爸爸重心不稳，往后迈脚时被身后的儿子绊住，重重地摔在儿子身上。 当超市工作人员...
我们可可生生说我们一个人喜欢另一个人，不注重他人的外表？这是事实嘛？全他妈是骗人的，如果突然有个恐龙，和一个校花站在你面前，你会选谁？这还要说嘛，肯定校花啦，谁会喜欢恐龙， 人，口口声声说不在乎，其实你的内心已经选择了，而你只是嘴上说说而已，而不是现实
大学已经过去两年了，没有获得任何奖项，只是在学生会浪费生命，每每要申请各种奖项时就因为成绩不达标而不成功，所以我希望把剩下的所有时间花在自身建设上来。
人嘴巴除了用来吃东西，还用来沟通谈话，谈话不是张嘴就来，什么话该说、什么话不该说，在大脑里要过一遍，因为说出去的话如泼出去的水----覆水难收。
谈话要看谈话的对象是谁？不能千篇一律一套说词，每个人听取信息的方式不一样，有的反应迅速，有的反应迟缓，反应迅速的可以...
当中国女排在1984年美国洛杉矶奥运会上第一次夺得奥运金牌时，谁会想到32年之后，世界是怎样？中国是怎样？奥运会怎样？女排会怎样？ 今天，在巴西里约奥运会上，女排和女排精神再一次惊艳绽放，再一次勾起所有中国人的共鸣和回忆。 这是一次阔别12年之后的与奥运金牌的又一次“重逢”...如何看待目前redux存在的问题？如何看待react16.3出的新context api？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。16被浏览679分享邀请回答corol.gitbooks.io/ractor/content/赞同 添加评论分享收藏感谢收起Redux刚刚入门者对Redux的理解和使用
阅读 年03月20日 发布，来源：
关于Redux刚刚刚刚入门者对Redux的理解和使用
临危受命，一周各种熬夜突击redux，好吧，刚开始真的各种香菇蓝瘦，前天还熬到凌晨五点多，写了点demo，有点感觉，一点点记录下。这里简单介绍下Redux以及其与react结合的使用方法
最近学习东西太多太杂，经常与人交流讨论，新建的群，欢迎加入：
Node.js技术交流群：
React技术栈：
说明：因为笔者也是入门，如有扯淡扯错了，还望各路大神指教。
我们为什么需要Redux，什么是Redux
了解过react，我想大家对state都不陌生，而对于JavaScript单页面日趋复杂的今天，JavaScript需要管理越来越多的state，而这些state包括着各种乱七八糟途径来的数据。甚至有的应用的state会关系到另一个组件的状态。所以为了方便对这些state的管理以及对state变化的可控性。Redux这个东西就出来了！没错，就是为了让state的变化变得可预测！
那么redux到底是什么呢？
这里非权威的解释：就是一个应用的state管理库，甚至可以说是前端数据库。更包括的是管理数据。
不懂？OK，不懂就对了。。。
介绍完Redux和react-redux的基本概念我再通俗的解释下。
Redux的基本概念
state才是真正的前端数据库，它存储着这个应用所有需要的数据。
这里拿一个说明下,为什么说简单的例子呢，因为简单到不应该使用redux。。。
运行效果如图(学习redux这个例子被介绍烂了)：
项目的运行效果大家应该能猜到哈，猜不到的clone下项目几几运行下:-)
所以这里的如说问你，这个应用应该存在数据里什么数据呢？对的，就一个count，所以数据库就存一个count就可以了，同理，这个应用的state其实就酱紫：
注释错了，是count值为3 .╥﹏╥...
这里展示的不是很明显，可以拿我们下一篇博客的demo来查看下它的 state
所以说道这里，大家对于state就已经明白了，需要说明一下的是，一个应用只应该有一个state。对，不管多大，就一个！
既然这些state已经有了，那么我们是如何实现管理这些state中的数据的呢，当然，这里就要说到action了。
什么是action？E:action,中：动作。
是的，就是这么简单。。。
只有当某一个动作发生的时候才能够触发这个state去改变，那么，触发state变化的原因那么多，比如这里的我们的点击事件，还有网络请求，页面进入，鼠标移入。。。所以action的出现，就是为了把这些操作所产生或者改变的数据从应用传到store中的有效载荷。
需要说明的是，action是state的唯一来源。
action也没有什么神秘，本质上就是一个JavaScript对象，但是约定的包含type属性（你总得告诉你这个action是啥嘛），可以理解成每个人都要有名字一般。除了type属性，别的属性，都可以DIY~
那么这么多action一个个手动创建必然不现实，一般我们会写好action creator，即action的创建函数。调用action creator，给你返回一个action。
比如这个counter应用，我们就有两个action，一个decrement，一个increment。
所以这里的action creator写成如下：
export function decrement() {
type:DECREMENT_COUNTER
export function increment(){
type:INCREMENT_COUNTER
好吧，藏也藏不住了，你也发现了这里有另外两个按钮，干嘛的？奇数是点击+1、延迟+1，对应的action creator：
export function incrementIfOdd(){
return(dispatch,getState)=&{
const = getState();
if(counter%2==0) {
dispatch(increment());
export function incrementAsync() {
return dispatch =& {
setTimeout(() =& {
dispatch(increment());
好吧，又被你发现了，不是说action creator返回的是一个action对象么，你这返回的什么鬼？这里留个疑惑好吧，简单的解释，
为什么可以这么用呢，因为我用了中间件呀~（后续会介绍）
为了减少样板代码，我们使用单独的模块或文件来定义 action type 常量
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
这么做不是必须的，在大型应用中把它们显式地定义成常量还是利大于弊的。
如果我都快把action说完了你还是不懂action是什么的话，你就理解成，一个可能！改变state的动作包装。
既然这个可能改变state的动作已经包装好了，那么我们怎么去判断并且对state做相应的改变呢？对，这就是reducer干的事情了。
从一开始我们就说明下一个概念:
reducer决定了state的最终格式。
reducer是一个纯函数，也就是说，只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。
reducer对传入的action进行判断，然后返回一个通过判断后的state，这就是reducer的全部职责。
从代码可以简单地看出：
import from '../actions';
export default function counter(state = 0,action) {
switch (action.type){
case INCREMENT_COUNTER:
return state+1;
case DECREMENT_COUNTER:
return state-1;
这里我们就是对增和减两个之前在action定义好的常量做了处理。
对于一个比较大一点的应用来说，我们是需要将reducer拆分的，最后通过redux提供的combineReducers方法组合到一起。
如此项目上的：
const rootReducer = combineReducers({
export default rootR
虽然这里我们就一个counter (?_?) 但是道理你懂得。
这里你要明白：每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。
combineReducers() 所做的只是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，
然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。
store是对之前说到一个联系和管理。具有如下职责
维持应用的 state；
提供 getState() 方法获取 state
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。
后面两个不怎么用哈~
再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。
store的创建通过redux的createStore方法创建，这个方法还需要传入reducer，很容易理解：毕竟我需要dispatch一个action来改变state嘛。
应用一般会有一个初始化的state，所以可选为第二个参数，这个参数通常是有服务端提供的，传说中的Universal渲染。后面会说。。。
第三个参数一般是需要使用的中间件，通过applyMiddleware传入。
说了这么多，action，store，action creator，reducer关系就是这么如下的简单明了：
接合react-redux的使用
说到react-redux，必然想到react和redux，是的，react-redux正是redux和react的桥梁工具。
react-redux将组建分成了两大类，UI组建和容器组建。
简单的说，UI组建负责美的呈现，容器组件负责来帮你盛着，给你"力量"
好吧，官方点：
UI 组件有以下几个特征：
只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API
export default class Counter extends Component{
const = this.
Clicked: times
&button onClick=&+&/button&
&button onClick=&-&/button&
&button onClick=&increment if Odd&/button&
&button onClick=&increment async&/button&
容器组件特性则恰恰相反：
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API
class App extends Component{
const = this.
increment=
decrement=
incrementIfOdd=
incrementAsync=/&
App.propTypes = {
counter:PropTypes.number.isRequired,
increment:PropTypes.func.isRequired,
decrement:PropTypes.func.isRequired,
incrementIfOdd:PropTypes.func.isRequired,
incrementAsync:PropTypes.func.isRequired
export default connect(
counter:state.counter
ActionCreators
说到这里大家应该都懂，那么问题来了，redux和react如何产生点关系呢？？不难想到，如果产生关系肯定只要跟容器组件产生关系就可以了，毕竟他是react这些组件的老祖宗。
那么如何产生关系呢？？对的，就是上面代码里的，react-redux中的connect方法。
connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），
后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
比如这样：
export default connect(
state =& ({ counter: state.counter }),
ActionCreators
)(Counter);
因为作为组件，我们只要能拿到值，能发出改变值得action就可以了，所以mapStateToProps和mapDispatchToProps正是满足这个需求的。
当时对这个connect也是好一顿理解
这么通俗的说你该明白了吧
可以吧所有的组件想象成装在一个罐子里，这个罐子使用container做的，然后这个罐子的唯一的口就是里面的东西想要去改变的唯一途径。
说白了，这个口，就是connect，而redux中的所有的组件都是在罐子外面的。
reducer是改变state的，state就可以可以理解成组件的粮食，需要的时候redux就把粮食通过dispatch投入到罐子里。
那么我怎么知道你需要呢？所以我们之间得有个约束，你喊一声饿了，我就知道你要吃饭了，你喊一声渴了，我就知道你要喝水了。
这些动作，就是你发出的action，喊得词语，饿了，渴了，就是action.type，然后redux拿给军事reducer解读下，到底给罐子里投入什么。
不知道这么通俗的解释有没有说明白
所以这样看来，组件通过container包装以后和redux就可以说是完全隔绝了，组件就是做组件的事情，redux就是做redux的事情。中间的枢纽是connect。
这也就说明了，redux并不是只服务我们react哒~也即是我这一套逻辑在罐子外面，罐子里面是什么其实我并不是很在意。。。只要我们预定好action和state就可以了。
所以。。。redux也并没有特别神秘的地方。
当然，这里只是简单的说了下redux的简单概念，并没有特别深入的讲解。
关于redux的异步操作，以及在服务端的运行（node），universal渲染，结合react-router的使用等等等的功能，咱再慢慢了解慢慢研究慢慢总结哈~
ヾ(^▽^ヾ)
更多精彩文章
iView 3.0 暨神秘新品发布会
昌维 · 7 小时前
http://jerryzou.com/posts/abo...
昌维 · 7 小时前
比较基础，欢迎大家学习。
惠子 · 1 天前
https://blog.csdn.net/xtianji...
昌维 · 1 天前
更多精彩文章
SegmentFault
一起探索更多未知}