redux解析

工做流程

用戶在view操做發出 Action

store.dispatch(action)

Store 自動調用 Reducer，而且傳入兩個參數：當前 State 和收到的 Action， Reducer 會返回新的 State

let nextState = todo(previousState, action)

State 一旦有變化，Store 就會調用監聽函數

store.subscribe(listener)  // // 設置監聽函數

listener能夠經過store.getState()獲得當前狀態，若是使用的是 React，這時能夠觸發從新渲染 View

function listerner() {
  let newState = store.getState()
  component.setState(newState)   
}

概念

Action

是一個對象，其中的type屬性是必須的， 用來描述當前發生的事情，改變 State 的惟一辦法

const action = {
  type: 'ADD_TODO',  // 名稱
  payload: 'content' // 攜帶的信息
}

state

是包含全部數據的store對象的某個時間的數據集合

import { createStore } from 'redux'

const store = createStore(fn)  // 建立store對象
const state = store.getState()  // 獲取store對象的當前state

store.dispatch()

是 View 發出 Action 的惟一方法

import { createStore } from 'redux'
const store = createStore(fn)

store.dispatch({
  type: 'ADD_TODO',
  payload: 'content'
})

reducer

store 收到 action，獲得一個新的 State的計算過程，是個純函數（一樣的輸入，一定獲得一樣的輸出）

const reducer = function (state, action) {  // 當前state，傳入的action
  // ...
  return new_state;  // 返回一個新state
};

store.subscribe()

設置監聽函數，一旦 State 發生變化，就自動執行這個函數

import { createStore } from 'redux'
const store = createStore(reducer)

store.subscribe(listener)

設計思想

Web 應用是一個狀態機，視圖與狀態是一一對應的

全部的狀態，保存在一個對象裏面

適用場景

用戶的使用方式複雜

不一樣身份的用戶有不一樣的使用方式（好比普通用戶和管理員）

多個用戶之間能夠協做

與服務器大量交互，或者使用了WebSocket

View要從多個來源獲取數據

 

某個組件的狀態，須要共享

某個狀態須要在任何地方均可以拿到

一個組件須要改變全局狀態

一個組件須要改變另外一個組件的狀態