redux学习

流程

store分发（dispatch）> action（有type表示将要执行的动作）> reducer纯函数，接受先前的state和action，返回新的state（switch（action.type）case根据type类型执行不同操作，进而改变state）

action

cart-actions.js

export const ADD_TO_CART = 'ADD_TO_CART';export const UPDATE_CART = 'UPDATE_CART';export const DELETE_FROM_CART = 'DELETE_FROM_CART';export function addToCart(product,quantity,unitCost){    return{        type:ADD_TO_CART,        payload:{            product,            quantity,            unitCost        }    }}export function updateCart(product,quantity,unitCost){    return{        type:UPDATE_CART,        payload:{            product,            quantity,            unitCost        }    }}export function deleteFromCart(product){    return{        type:DELETE_FROM_CART,        payload:{            product        }    }}

reducer

• 不要修改state
• 在default的情况下返回旧的state

cart-reducer.js

import { ADD_TO_CART,UPDATE_CART,DELETE_FROM_CART } from '../actions/cart-actions'const initialState = {    cart:[        {            product:'bread 700g',            quantity:2,            unitCost:90        },        {            product:'milk 500ml',            quantity:1,            unitCost:47        }    ]}export default function(state=initialState,action){    switch(action.type){        case ADD_TO_CART:{            return{                ...state,                cart:[...state.cart,action.payload]            }        }        case UPDATE_CART:{            return{                ...state,                cart:state.cart.map(item =>                     item.product === action.payload.product?action.payload:item                )            }        }        case DELETE_FROM_CART:{            return{                ...state,                cart:state.cart.filter(item =>                    item.product !== action.payload.product                )            }        }        default:            return state;    }}

products-reducer.js

export default function(state=[],action){    return state}

index.js

import { combineReducers } from 'redux';import productsReducer from './products-reducer';import cartReducer from './cart-reducer';const allReducers = {    products:productsReducer,    shoppingCart:cartReducer}const rootReducer = combineReducers(allReducers);export default rootReducer

store.js

store.js

import { createStore } from 'redux'import rootReducer from './reducers'let store = createStore(rootReducer)export default store

index.js

import store from './store.js'import { addToCart,updateCart,deleteFromCart } from './actions/cart-actions'//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';reducer//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//        }//    }//}////////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()));//ADD_TO_CARTstore.dispatch(addToCart('Coffee 500mg',1,250));store.dispatch(addToCart('Flour 1kg',2,110));store.dispatch(addToCart('Juice 2L',1,250));//UPDATE_CARTstore.dispatch(updateCart('Juice 2L',3,270));//DELETE_FROM_CARTstore.dispatch(deleteFromCart('Flour 1kg'));unsubscribe();