使用react-redux实现购物车功能

写在前面：好久没更了，这个习惯还是得捡起来。希望能坚持下去…

废话不多说，开始今天的内容。今天分享的内容是通过react-redux结合中间件redux-thunk实现购物车功能。

一、准备工作

首先我们应该先下载react-router-dom、redux、react-redux、redux-thunk
你可以通过yarn或者npm都可以。

举个栗子

cnpm install --save react-router-dom redux react-redux redux-thunk

接下来在react脚手架中入口文件的结构如下：

import {
   Provider} from 'react-redux';
import {
   BrowserRouter as Router} from 'react-router-dom';
import store from './store';

<Provider store={
   store}>
	<Router>
		</App>
	</Router>
</Provider>

二、主要部分

首先我们应该有两个路由页面，一个是用于展示商品列表的，另一个是购物车页面。主要工作就是在list页面上我们异步读取数据，然后在list页面上进行渲染。我们将商品加入购物车，然后实现基本的购物车功能。

这块需要补充一个知识点就是：我们需要通过redux-thunk这个中间件实现在react-redux中异步请求数据，具体方法是在actionCreator中方法里面return一个回调，在回调中执行异步方法然后，然后dispatch到reducer。

废话不多说，上代码。

getData(){
   
        //异步行为，函数返回一个回调，在回调中执行异步动作，
        //完成后通过dispatch分发动作到reducer上
        return (dispatch)=>{
   
            //执行异步行为
            fetch("http://localhost:8888/list").then((res)=>res.json()).then((res)=>{
   
                dispatch({