Redux 学习总结笔记

项目驱动是学习框架很是高效的一种方式。
学习 redux 全家桶推荐 react-douban：一个 React + Redux + React-Router 完整项目

该笔记主要是下面三部分：

• Redux 介绍、基本概念和API和工做流程
• 中间件原理介绍及使用
• redux-thunk 的用法

Redux 介绍

Redux是什么？有什么做用？

Redux是一个管理状态容器，将整个前端应用的状态都统一到一个地方管理。经过单一数据流操做，来实现单一状态。使得前端应用更加方便的管理状态。

核心概念

整个state就是一个object，能够将store理解为前端的数据库，没有setter，不能直接更改。
若是要更改state，则须要dispatch an action。而 action 则是一个对象，用于描述提交了什么操做，而不涉及对 state 具体的操做。
强制使用action来改变每一次的state，可让咱们更加容易追踪到每次state的变化。
而 Reducer 则是用来将 Action 和 State 串起来的一个函数。用于具体处理对 state 的改变。

以上的过程差很少就是整个 Redux 的思想。

Redux 三大原则

Single source of truth（单一数据源）

在你的应用中state存储在一个 object tree，并且这个object tree 在该应用中是惟一一个的。
将全部state存在于应用中惟一一个object tree 带来的好处是：能够实现开发环境下的保存状态的历史状态，实现Undo/Redo等功能。

State is read-only(State 只读性)

改变 state 的惟一方式就是触发一个 action（action 是一个用于描述发生了什么的对象）

Changes are made with pure functions(使用纯函数进行更改)

为了描述action 如何具体改变 state tree，你须要编写reducers。Reducer 只是一些纯函数。
Reducer 接收 state 和 action 做为参数，并返回新的 state。

基本概念和api

Store

Store就是保存数据的地方，能够看出是一个容器，整个应用就只能有一个store。Redux提供createStore()函数来生成store

import {createStore} from 'redux'

const store = createStore(app);复制代码

State

store 某个节点对应的数据集合就是state。能够经过store.getState()得到。
Redux 规定，一个state对应一个View。State相同，则View相同。

Action

State 的变化会致使 View 的变化。可是用户接触不到State，只能接触到View。因此State的变化必须是View致使的。Action就是View发出的通知，表示State要发生改变了。
Action是一个对象，其中type属性是必须的，表示Action的名称。其余属性随意。

Action Creator

用于生成Action 的函数。

store.dispatch()

store.dispatch()是View发出Actiion 的惟一办法。

import {createStore} from 'redux'
const store = createStore(fn);
store.dispatch(addTodo(text))复制代码

Reducer

Store 收到Action以后，必须给出一个新的State，这样才能使View发生变化。这种State的计算过程叫作Reducer。
Reducer 是一个函数，它接受Action和当前的state做为参数，返回一个新的state。
整个应用的初始状态，能够做为state的默认值。

Reducer还能够进行拆分，而后经过combineReducers方法，结合成一个大的Reducer。

Redux工做流程

首先用户发出Action。

store.dispatch(action)复制代码

而后store自动调用Reducer，而且传入两个参数：当前的state 和 收到的Action. Reducer 会返回新的state。

let nextState = reducer(previousState, action)复制代码

State一旦变化，Store就会调用监听函数。Listener能够经过store.getState()获得当前状态。

第二部分：redux 中间件

中间件与异步操做

Redux解决了同步状态更新的问题，可是异步操做却没有解决。
若是要 使Reducer在异步操做结束后自动执行，必须使用中间件。

applyMiddleware

createStore()方法包含了参数applyMiddleware(),
它是Redux的原生方法，做用是 将全部的中间件组成一个数组，依次执行

异步操做的基本思路

异步操做须要发出三种Action

• 请求发起时的Action
• 请求成功时的Action
• 请求失败时的Action

因此流程也很清楚：

1. 操做开始时，dispatch action，触发State更新为正在操做状态
2. 操做结束后 再次 dispatch action,获取结果

解决方案：
写出一个返回函数的 Action Creator，而后使用redux-thunk中间件改造store.dispatch。

import {createStore, applyMiddleware} from 'redux'
import thunk from 'react-thunk'

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
)

export function fetchPost() {

}
export function requestPost(){}

export function receivePost(){}

export function handleError(err) {

}

export function requstAync() {
  return function(dispatch){
    // 请求发起时 dispatch action
    dispatch(requestPost())
    // 这里的fetchPost 是一个Promise
    return fetchPost()
    .then(response => response.json())
    .then(json =>
     // 请求成功时 dispatch action
      dispatch(receivePost())
    )
    .catch(err =>
     // 请求错误时 dispatch action
      dispatch(handleError(err))
    )
  }
}复制代码

第三部分：redux-thunk用法

React-Redux将组件分为两种：

• UI组件（纯组件）
• 容器组件

UI组件特色

• 只负责UI显示，不带任何逻辑
• 无状态组件
• 全部数据都是经过props提供
• 不使用任何Redux的API

容器组件

• 负责管理数据和业务逻辑，不负责UI显示
• 带有内部状态
• 使用Redux API

若是遇到一个组件既有UI和业务逻辑时，须要拆分红下面的结构：
外面是一个容器组件，里面包含若干个UI组件。容器组件负责与外部的通讯、传递数据给UI组件。
UI组件则负责页面显示。

connect

用于从UI组件生成容器组件。能够这么来理解 connect 的做用。
connect 就是将 state 上的 props（属性）和 方法（dispatch）添加到对应的 UI组件上。

import {connect} from 'react-redux'
import {TodoList} from './TodoList'
export default connect()(TodoList)复制代码

上面的代码就将UI组件 TodoList 转换为一个容器组件。
每一个容器组件须要定义两方面的信息：

• 输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的props
• 输出逻辑：用户发出的动做如何变为 Action 对象，从 UI 组件传出去

完整的connect 方法的API以下：

import {connect} from 'react-redux'
import {TodoList} from './TodoList'

function mapStateToProps(state){
  return{
    // do something
  }
}

function mapDispatchToProps(dispatch){
  return{
    // do something
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)复制代码