Redux入門教程(快速上手)_day_01

接下來也只是分享一些小案例來讓你好好理解該如何使用Redux
詳情具體能夠參考官方文檔：https://www.redux.org.cn/

學習前提

開始以前確保你的設備已經安裝：

• Node.js
• npm或者yarn(本人本身用到的是yarn)

什麼是Redux

用官方文檔的話來講，就是Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。在標準的MVC框架中，數據能夠在UI組件和存儲之間雙向流動，而Redux嚴格限制了數據只能在一個方向上流動。 見下圖：

---如今看可能對於剛接觸者一臉蒙××，等到了咱們實現了一個小demo咱們再回過頭來理解可能會更加清晰

用了會怎麼樣

可讓你構建一致化的應用，運行於不一樣的環境（客戶端、服務器、原生應用），而且易於測試。不只於此，它還提供 超爽的開發體驗。總得來講就是實現項目工程化

本次經過一個購物車的小栗子方便來理解redux

配置Redux

配置Redux開發環境的最快方法是使用create-react-app工具。在開始以前，確保已經安裝並更新了nodejs，npm和yarn。咱們生成一個redux-shopping-cart項目並安裝Redux：

create-react-app redux-shopping-cart

cd redux-shopping-cart
yarn add redux # 或者npm install redux```

首先刪除src文件下除index.js之外的文件，以及刪除index.js全部代碼，插入如下內容：

import { createStore } from "redux";
//state:存儲數據 action：容器

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);//建立一個redux存儲區`
注意這裏咱們起初state是沒有數據的，因此要讓他成爲空數組

const reducer = function(state=[], action) {
  return state;
}

若是你有多個redux怎麼辦？咱們將用到Redux包中提供的combineReducers函數。修改代碼以下：

// src/index.js

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

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

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

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

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

接下來咱們爲reducer定義一些初始數據？

const initialState = {
    cart: [
      {
        product: 'bread 700g',
        quantity: 2,
        unitCost: 90
      },
      {
        product: 'milk 500ml',
        quantity: 1,
        unitCost: 47
      }
    ]
  }
const cartReducer = function(state=initialState, action) {
  return state;
}
let store = createStore(rootReducer);

console.log("initial state: ", store.getState());//獲取state

咱們在終端輸入命令npm start或yarn start,就能看到state的輸出，以下圖：

咱們來定義商品的增長，刪除，修改的操做(action)，先寫增長：

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]//將action.payload中的數據與state合併成新的state
      }
    }

    default:
      return state;
  }
}

接下來是寫咱們的action:

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

定義監聽事件，監聽state的改變：

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

向store添加數據：

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

接下是取消監聽：

unsubscribe();

下面是整個index.js文件：

// src/index.js

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

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

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

const ADD_TO_CART = 'ADD_TO_CART';

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

    default:
      return state;
  }
}

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

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

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

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

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

保存代碼後，Chrome會自動刷新。能夠在控制檯中確認新的商品已經添加了：

回頭總結一下：
redux的一個工做流程是：(action)發送請求-->傳入到(store)-->(Reducers)指定了應用狀態的變化如何響應 actions 併發送到 store 的

這樣看是否是發現index.js的代碼不少很複雜，那如何組織Redux代碼呢？先休息一會