redux入门笔记

redux 严格限制了数据只能在一个方向上流动。
在durex里面所有的数据被保存在一个叫store的容器里。一个应用程序只能有一个store。store本质是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态。 需要更改store上的状态时，需要分发一个action。store接收到一个action，把这个action代理给相关的reducer。reducer是一个纯函数（返回值不会因为变量的改变而改变，可以查看之前的状态，执行一个action并返回一个新的状态）

//从redux引入store
import { createStore } from "redux";
//多个reducer
import { combineReducers } from 'redux';
//一个普通的reducer
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';
//赋予初始化的state 
const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}
//一个添加操作的action
function addToCart(product, quantity, unitCost) {
  return {
    type: ADD_TO_CART,
    payload: {
      product,
      quantity,
      unitCost
    }
  }
}
//一个store可以有多个sotre
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())
);

//dispatch执行更新状态操作
store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();