# ShoppingBox业务逻辑

# 商品列表

# 获取数据 axios

  • JSON文件 使用 create-react-app 构建项目,必须将我们的静态文件json和图片放在public路径下;

  • axios

确保静态json文件在public路径下后,在浏览器访问http://localhost:3000/data.json访问查看

npm install axios

axios请求代码:

import axios from "axios"

componentDidMount(){
    axios.get("http://localhost:3000/data.json").then((response)=>{
      // console.log(response);
      var data = response.data;

      this.props.addItem(data);
    }).catch((error)=>{
      console.log(error);
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12

数据请求写在 componentDidMount中

# 添加获取到的数据到redux

  • redux文件结构 actions:存储所有的action创建函数 reducers:定义state对应的reducer函数 actionType.js 保存所有的actionType index.js redux的入口文件,创建store和合并reducers

  • 创建添加请求数据到state的action

import {ADD_STORES} from "../actionType";

export function addItemsToState(items){
  return {
    type:ADD_STORES,
    items:items
  }
}
1
2
3
4
5
6
7
8
  • 修改reducer 定义state items:商品列表 storeBox: 购物车
import {ADD_STORES} from "../actionType";

const initialState = {
  items:[

  ],
  storeBox:{
      items:[

      ],
      totalCount:0,
      totalPrice:0
    }

}

export default function storeListReducer(state=initialState,action){
  switch(action.type){
    case ADD_STORES:
      return {
        items:[...state.items, ...action.items],
        storeBox:state.storeBox
      }
    default:
      return state;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

将action中的一组数据添加到商品列表数据中

  • 修改redux的入口文件index.js
import {createStore,combineReducers} from "redux"
import storeListReducer from "./reducers/storeListReducer"

const rootReducer = combineReducers({
  storeList:storeListReducer
});

const initialState = {};
const store = createStore(rootReducer,initialState);

export default store;
1
2
3
4
5
6
7
8
9
10
11
  • 组件提交action 引入 connect 引入 action 创建函数
import {connect} from "react-redux";

import {addItemsToState} from "./redux/actions/storeListAction"

//在事件中调用提交函数addItem()


function mapStatetoProps(rootReducer){
  return{
    data:rootReducer.storeList
  }
}

function mapActionToProps(dispatch){
  return{
    addItem:(items)=>dispatch(addItemToState(items))
  }
}

export default connect(mapStatetoProps,mapActionToProps)(StoreList)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 购物车业务

# 加入购物车

  • 首次加入 判断 state中items的长度length,如果购物车items中有元素,则需要判断新加入的商品id是否与已经存在的商品id相符合,
case ADD_SHOPCAR:
      if(state.shoppingcar.length !== 0){
        var index = state.shoppingcar.findIndex((item)=>item.id === action.car.id)
        if(index !== -1){
          state.shoppingcar[index].count+=1;
        }else{
          state.shoppingcar.push(action.car)
        }
      }else{
        state.shoppingcar.push(action.car)
      }

1
2
3
4
5
6
7
8
9
10
11
12
Last Updated: 8/9/2022, 4:24:39 PM