数据流：

1.数据流是行为和响应的抽象.

2.react使用的是单数据流的方式.

action：行为和动作

controller:控制器

model:模型

view:视图

单机事件会调用一个方法，单机就是行为，action就是响应，代码就是controller,

flux介绍：

1.Flux是一种架构思想，专门解决软件的结构问题，它跟MVC架构是同一类东西，但是更加简单和清晰.

2.首先，Flux将一个应用分成四个部分：

(1)View:视图层

(2)Action(动作):视图层发出的消息(比如mouseClick)

(3)Dispatcher(派发器):用来接收Actions、执行回调函数.

(4)Store(数据层):用来存放应用的状态，一旦发生变动，就提醒Views要更新页面.

redux介绍：

1.redux和flux非常相似，是flux的一个实现方法，但是还存在一些差异.

(1) Web应用是一个状态机，视图与状态是一一对应的。所有的状态，保存在一个对象里面.

原理：

1.当用户触发了UI里的action时，action将被送到reducer方法里.

2.reducer就会更新数据层.

3.react数据也就是state(state包含在store里).

4.state再去渲染UI.

Redux可以用这三个基本原则来描述：

1.单一数据源

整个应用的state被储存在一棵object tree中，并且这个object tree只存在于唯一一个store中.

2.State是只读的

唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象.

3.使用纯函数来执行修改

为了描述action如何改变staet tree,你需要编写reducers.

redux实用场景：

1.多交互，多数据源。

(1)用户的使用方式复杂.

(2)不同身份的用户有不同的使用方式(比如普通用户和管理员)

(3)多个用户之间可以协作.

(4)与服务器大量交互，或者使用了WebSocket

(5)View要从多个来源获取数据

2.从组件角度

(1)某个组件的状态，需要共享.

(2)某个状态需要在任何地方都可以拿到.

(3)一个组件需要改变全局状态.

(4)一个组件需要改变另一个组件的状态.

方法详细讲解-store

1.redux 主要由三部分组成：store、reducer、action

2.store是一个对象，有四个主要方法：

(1)dispatch:用于action的派发——在createStore中可以用middleware中间件对dispatch进行改造，比如action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步.

(2)subscribe：监听state的变化——这个函数再store调用dispatch时会注册一个listener监听state变化，当我们需要知道state是否变化时可以调用，它返回一个函数，调用这个返回的函数可以注销监听.

(3)getState:获取store中的state——当我们用action触发reducer改变了state时，需要再拿到新的state里的数据，毕竟数据才是我们想要的。getState主要在两个地方需要用到，一是在dispatch拿到action后store需要用它来获取state里的数据，并把这个数据传给reducer,这个过程是自动执行的，二是在我们利用subscribe监听到state发生变化后调用它来获取新的state数据，如果做到这一步，说明我们已经成功了.

(4)replaceReducer:替换reducer，改变state修改的逻辑.

3.action：

action是一个对象，其中type属性是必须的，同时可以传入一些数据，action可以用actionCreator进行创造，dispatch就是把action对象发送出去.

4.reducer:

(1)reducer是一个函数，它接受一个state和一个action，根据action的type返回一个新的state，根据业务逻辑可以分为很多个renducer，然后通过combineReducers将它们合并，state树中有很多对象，每个state对象对应一个reducer，state对象的名字可以在合并时定义.

flux和redux相关推荐

【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成 ...
零基础理顺react，flux，redux是什么？
无意看到的一边关于react,flux,redux的文章,膝盖已被收下. https://www.zhihu.com/question/47686258/answer/107209140
理顺react，flux，redux这些概念的关系
理顺react,flux,redux这些概念的关系作者:北溟小鱼hk 链接:https://www.zhihu.com/question/47686258/answer/107209140 来源:知 ...
Vuex、Flux、Redux、Redux-saga、Dva、MobX
这篇文章试着聊明白这一堆看起来挺复杂的东西.在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎. 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要.什 ...
Flux --gt; Redux --gt; Redux React 入门基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
mvc 事务层切换数据源_Mvc 与 Flux 与 Redux的一些思考
MVC模型解决问题以及不足解决问题为了解决业务逻辑和界面渲染逻混在一起 MVC流程图 2. 不足由于 Model 对外直接暴露了 set 和 on 方法,导致 View 层可以随意改变 Mod ...
怎样理顺 React，flux，redux 这些概念的关系，开发中有必要使用它们吗?
原文链接:www.zhihu.com 一.引子这是关于一把玄铁重剑,一本经书,和一套轻功步法的故事. 让我们先从普通程序猿们的日常工作内容说起, 一般来说,程序猿们大部分时间关注的可能不是研发某个具 ...
Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
XCoreRedux框架:Android UI组件化与Redux实践
XCoreRedux框架:Android UI组件化与Redux实践 @author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:http ...

flux和redux

数据流：

flux介绍：

redux介绍：

flux和redux相关推荐

最新文章

热门文章