redux是一種狀態(tài)容器。
因為用了reducer和純函數(shù)所以可預測，每個state都由舊的state建立一個新的state。
redux嚴格限制數(shù)據(jù)只能一個方向上流動。

image

要說明整個模型的運作流程，首先要弄清redux模型中幾個組成對象：action，reducer，store。

action把數(shù)據(jù)從ui傳到store，store數(shù)據(jù)的唯一來源，要改變組件狀態(tài)，就要分發(fā)action。
reducer reducer通過action的type來處理不同的事件
store 狀態(tài)樹，保存所有對象狀態(tài)。

不管什么應用程序都需要有App state(應用程序狀態(tài))，不論是在一個需要用戶登錄的應用，要有全局的記錄著用戶登錄的狀態(tài)，或是在應用程序中不同操作介面(組件)或各種功能上的數(shù)據(jù)溝通，都需要用到它。

屬性React.js的同學都知道，React被設計為一個MVC架構中的View(視圖)的函數(shù)庫，但實際上它可以作的事情比MVC中的View(視圖)還要更多，它甚至可以作類似Model(模型)或Controller(控制器)的事情。

同時，在React中的組件是無法直接更動state(狀態(tài))的包含值，要透過setState方法來進行更動，這有很大的原因是為了Virtual DOM(虛擬DOM)的所設計，這是其中一點。另外在組件的樹狀階層結構，父組件(擁有者)與子組件(被擁有者)的關系上，子組件是只能由父組件以props(屬性)來傳遞屬性值，子組件自己本身無法更改自己的props，這也是為什么一開始在學習React時，都會看到大部份的例子只有在最上層的組件有state，而且都是由它來負責進行當數(shù)據(jù)改變時的重新渲染工作，子組件通常只有負責呈現(xiàn)數(shù)據(jù)。

當然，有一個很技巧性的方式，是把父組件中的方法聲明由props傳遞給子組件，然后在子組件觸發(fā)事件時，調用這個父組件的方法，以此來達到子組件對父組件的溝通，間接來更動父組件中的state。不過這個作法并不直覺，需要事先規(guī)范好兩邊的方法。在簡單的應用程序中，這溝通方式還可行，但如果是在有復雜的組件嵌套階層結構時，例如層級很多或是不同樹狀結構中的子組件要互相溝通時，這個作法是派不上用場的。

在復雜的組件樹狀結構時，唯一能作的方式，就是要將整個應用程序的數(shù)據(jù)整合在一起，然后獨立出來，也就是整個應用程序領域的數(shù)據(jù)部份。另外還需要對于數(shù)據(jù)的所有更動方式，也要獨立出來。這兩者組合在一起，就是稱之為”應用程序領域的狀態(tài)”，為了區(qū)分組件中的狀態(tài)(state)，這個作為應用程序領域的持久性數(shù)據(jù)集合，會被稱為store(存儲)。

import { createStore } from 'redux'
const reducer = function(state,action){
  return state
}
const store = createStore(reducer)

1. 從redux中引入createStore()

2. 創(chuàng)建一個reducer的方法，第一個參數(shù)state是保存在store中的數(shù)據(jù)，第二個參數(shù)action是一個容器，用于：
   type：一個簡單的字符串常量 add update delete
   payload：用于更新狀態(tài)的數(shù)據(jù)

3. 創(chuàng)建一個redux存儲區(qū)，以reducer作為參數(shù)來構建，存儲在redux中的數(shù)據(jù)可以直接訪問，但是只能通過提供reducer進行更新。

多個reducer

import {createStore} from 'redux'
import {combineReducers} from 'redux'

const productsReducer = funtion(state=[],action){
  return state
}

const cartReducer = funtion(state=[],action){
  return state
}

const allReducers = {
  products: productsReducer,
  cart: cartReducer
}

const rootReducer = combineReducers(allReducers)
let store = createStore(rootReducer);

把數(shù)據(jù)插入到state中，作為初始數(shù)據(jù),我們可以在reducer中進行操作,return中添加數(shù)據(jù)

const initialState = {
  cart:[
    {
      product:'bread',
      quantity:2,
      unitCost:90
    },
  {
    product:'milk',
    quantity:1,
    unitCost:47
  }
  ]
}

const cartReducer = funtion(state=initialState,action){
 switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

一個reducer處理不同action類型，但處理的是同一個數(shù)據(jù)，因此我們需要一個switch語句，比如增刪改查就可以使用。
所以我們需要定義一個action，作為store.dispacth的參數(shù)，action返回兩個屬性：必選的type和可選的payload。payload就是傳給reducer的數(shù)據(jù)

function addToCart(product,quanlity,unitCost){
  return {
    type:ADD_TO_CART,
    payload:{product,quanlity,unitCost}
  }
}

然后，我們定義了一個函數(shù)，返回一個JavaScript對象。在我們分發(fā)消息之前，我們添加一些代碼，讓我們能夠監(jiān)聽store事件的更改。dispacth分發(fā)消息，接收的是action，也就是將action 觸發(fā)，然后action再return type 和payload，然后reducer再switch，返回state

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispacth(addToCart('Coffee 500gm', 1, 250))

unsubscribe();

純屬筆記，建議參考：https://blog.csdn.net/xiangzhihong8/article/details/80518709