使用技術

前 端 React/Redux/React Router/styled component

後 端 PHP/mySQL（尚未完成）

前端說明

Action

action.js

export const ADD_LIST = 'ADD_LIST'
export const DELETE_LIST = 'DELETE_LIST'

export const addList = item => {
    return {
        type: 'ADD_LIST',
        item,
    }
}
export const deleteList = item => {
    return {
        type: 'DELETE_LIST',
        item,
    }
}

Reducer

reducer/shoppingCart.js

const exitItem = (state={},action) => {
    switch(action.type){
        case 'ADD_LIST':
            if (state.id !== action.item.id){
                return state
            } else {
                return Object.assign({},state,{
                    num : state.num+1
                })
            }
            
            
        default:
            return state
    }
}

const shoppingCart = (state=[],action) => {
    switch(action.type){
        case 'ADD_LIST':
            const listItem = {
                id:action.item.id,
                title:action.item.title,
                price:action.item.price,
                num:1
            }
            let isExit = state.find(item=>{
                if (action.item.id !== item.id){
                    return false
                } else {
                    return true
                }
            })
            if (!isExit){
                return [
                    ...state,
                    listItem
                ]
            } else {
                return state.map(t =>
                    exitItem(t,action))
            }
        case 'DELETE_LIST':
            return state.filter(item=>{
                return item.id !==action.item.id
            })
        default:
            return state
    }
}

export default shoppingCart

reducer/index.js

import { combineReducers } from 'redux'
import shoppingCart from './shoppingCart'

const todoApp   = combineReducers({
    shoppingCart
})

export default todoApp

Container

Container/CheckList.js

import React from 'react';
import { connect } from 'react-redux'
import { addList,deleteList} from '../action/action'
import shoppingList from '../components/ShoppingList'

const mapStateToProps = (state) => {
    return {
        shoppingList: state.shoppingCart
    }
    
}

const mapDispatchToProps = (dispatch) => {
    return {
        addList:(list)=>{
            dispatch(addList(list))
        },
        deleteList:(list) => {
            dispatch(deleteList(list))
        }
    }
}

const CheckList = connect(mapStateToProps,mapDispatchToProps)(shoppingList)

export default CheckList