1.引言

因此我们为何不可以将所有的数据交给一个中转站，这个中转站独立于所有的组件之外，由这个中转站来进行数据的分发，这样不管哪个组件需要数据，我们都可以很轻易的给他派发。

而有这么一个库就可以帮助我们来实现，那就是 Redux ，它可以帮助我们实现集中式状态管理

2.redux的使用场景

某个组件的状态需要共享时
一个组件需要改变其他组件的状态时
一个组件需要改变全局的状态时

3.redux的工作流程

首先，用户在视图中通过 store.dispatch 方法发出 action。
然后，store 自动调用 reducers，并且传入两个参数：当前 state 和收到的 action。reducers 会返回新的 state 。
最后，当store 监听到 state 的变化，就会调用监听函数，触发视图的重新渲染。

4.redux初始化流程

1.创建createstore（store/index.js）

createStore用来创建一个Redux中的容器对象，它需要三个参数：reducer、preloadedState、enhancer。

reducer是一个函数，是state操作的整合函数，每次修改state时都会触发该函数，它的返回值会成为新的state。
preloadedState就是state的初始值，可以在这里指定也可以在reducer中指定。
enhancer增强函数用来对state的功能进行扩展，暂时先不理它。

2.创建reducer.js

3.创建action.js(用来处理操作）

5.简单实现（action函数调用后返回的是对象）

1.在组件中使用action处理

使用store的dispatch方法，直接调用action函数，返回一个对象，然后把该对象通知给store。然后store会自动调用reducer函数，对状态进行处理。

action中

组件中

2.store自动调用所对应的reducer函数，对状态做处理。

注意：此处的action是dispatch过来的参数。prestate是状态。

3.状态变化后，通过subscirbe函数，重新调用渲染函数

6.aciton函数调用返回的是函数

//action返回一个函数，把函数dispatch到store中，需要中间件redux-thunk，函数会有一个参数dispatch时间到了直接dispatch函数的执行结果。
1.action.js

2.组件中使用

store/index.js

注意：出现的常见错误

1.action返回的要是对象

如果action返回的是函数，则需要中间件处理。

解决方法：

action函数调用后返回一个对象。
使用redux-thunk，添加中间件。

redux|react相关推荐

函数式编程在Redux/React中的应用
本文简述了软件复杂度问题及应对策略:抽象和组合:展示了抽象和组合在函数式编程中的应用:并展示了Redux/React在解决前端状态管理的复杂度方面对上述理论的实践.这其中包括了一段有趣的Redux推导 ...
RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
redux react ajax,使用react-redux触发事件操作
我正在使用react / redux / react-redux来实现执行ajax请求的模式形式 . 如果我是正确的,react-redux使您能够: 将redux商店中的数据显示给您的组件将容器中 ...
Flux --gt; Redux --gt; Redux React 入门基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
Router入门0x205: react-route + redux + react 集成
0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from 'react' import ReactDom from 'react-dom'class ...
react 组件怎么公用_React、Redux与复杂业务组件的复用
All State In Redux 在上一篇文章[Redux的副作用处理与No-Reducer开发模式]中,我们介绍了如何使用Redux/Redux-Saga来进行组件的状态共享,以及副作用处理. ...
react实战项目_React实战之React+Redux实现一个天气预报小项目
引言经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
如何使用React和Redux前端创建Rails项目
by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用React和Redux前端(加上Typescript!)创建Rails项目 (How to create a Rails ...

redux|react