【巷子】---redux---【react】

1、flux的缺陷

 

由于dispatcher和Store能够有多个互相管理起来特别麻烦

 

2、什么是redux

 

其实redux就是Flux的一种进阶实现。它是一个应用数据流框架，主要做用应用状态的管理

 

设计思想：

(1)、web应用就是一个状态机，视图和状态一一对应

(2)、全部的状态保存在一个对象里面

 

三大原则：

(1)、单一数据源

整个store被储存在一个Object tree(对象树)中，而且这个Object tree只存在于惟一一个store中

(2)、state是只读的

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

 

(3)、使用纯函数来修改(reducer)

为了描述action如何改变state tree,你须要编写reducers

 

3、redux适用的场景

 

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

(2)、不一样身份的用户有不一样的使用方式（好比普通用户和管理员）

(3)、多个用户之间能够协做

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

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

当项目多交互、多数据源的时候必须用到redux

 

从组件的角度来看何时用到redux

(1)、某个组件的状态，须要共享

(2)、某个状态须要在任何地方均可以拿到

(3)、一个组件须要改变全局状态

(4)、一个组件须要改变另外一个组件的状态

 

4、redux的工做流程

                     

若是咱们有一个组件，那么想要获取数据就须要从Store中获取数据，当组件须要改变Store数据的时候。须要建立一个Action,而后经过 dispatch(action) 传递给Store，而后Store把Action转发给Reducers. Reducers会拿到previousState(之前的state数据) 和action。而后将previousState和action进行结合作新的数据(store)修改。而后生成一个新的数据传递给Store 。Store发送改变那么View也会发生改变

 

 

5、建立Store

 

 

 

在Flux中Store是咱们手动建立的，可是在redux中Store是redux提供的

 

(1)、安装 yarn add redux --dev

 

(2)、引入 import { createStore } from "redux";

 

(3)、建立一个store = createStore(reducer)

 

这样建立一个store咱们没有办法进行存值，所以咱们须要在createState中传递一个参数reducer这个参数就至关于Flux中的dispatcher遗留产物。这个遗留产物有一个规范就是内部必须是一个纯函数

 

(4)、建立reducer.js

这个函数里面有2个参数一个是state，另外一个是action。

state指的是store中的数据

action指的是View修改数据的时候传递过来的action

 

这个函数必须返回一个新的数据，并且还不能对老的数据进行修改(Reducer函数中不能改变state，必须返回一个全新的对象)

 

咱们能够先把这个state设置一个默认值defaultState。在defaultState这个对象中咱们能够定义一些初始的数据

 

官方解释reducer:

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你能够只有一个 reducer，随着应用变大，你能够把它拆成多个小的 reducers，分别独立地操做 state tree 的不一样部分，由于 reducer 只是函数，你能够控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器

 

(5)、导出Store

 

导出的store这个对象中默认自带了一些方法

(1)、dispatch：用来传递action

(2)、getState：返回值就至关于this.state中的数据,里面存放着公共的数据

(3)、replaceReducer：

(4)、subscribe：监听数据的改变，必须传递一个函数

(5)、Symbol(observable)：

 

6、建立Action

 

7、将Action传递给store  

 

方法：store.dispatch(action)

当调用完这个方法后action会自动传递给reducer,这也是咱们为何在reducer中定义参数action    的缘由。在reducer中咱们会对action中的type进行比较，若是比较成功则返回一个新的state

 

8、监听数据的改变

store.subscribe()

 

 

9、如何将reducer拆分红多个reducers

 

(1)、引入combineReducers

import { combineReducers, createStore } from "redux";

 

(2)、合并多个reducers

let reducer = combineReducers({ todoReducers, tabReducers })

 

(3)、建立store

let store = createStore(reducer)

 

栗子：

 

 

注意：在使用state的时候要注意使用的谁的state

 

10、纯函数的概念

 

一样的输入必须获得一样的输出

 

约束：

不得修改参数

不能调用系统I/O的API

不能调用Date.now()或者Math.random()等不纯的方法，由于每次获得值是不同的结果 

 

11、redux与flux的区别

 

Redux没有Dispatcher,且不支持多个store，Redux只有一个单一的store和一个根级的reducer函数。随着应有的不断变大，根级的reducer要拆分红多个小的reducers，分别独立的操做state的不一样部分，而不是添加新的 stores。这就像一个 React 应用只有一个根级的组件，这个根组件又由不少小组件构成