Redux

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_CART
store.dispatch(addToCart('Coffee 500mg',1,250));
store.dispatch(addToCart('Flour 1kg',2,110));
store.dispatch(addToCart('Juice 2L',1,250));
//UPDATE_CART
store.dispatch(updateCart('Juice 2L',3,270));
//DELETE_FROM_CART
store.dispatch(deleteFromCart('Flour 1kg'));
unsubscribe();