2个action一个从服务器中请求数据,另一个把数据保存在store中

    product.actions.js

    * 实现商品列表数据展示 - 图1

    让组件调用createAction函数

    * 实现商品列表数据展示 - 图2

    * 实现商品列表数据展示 - 图3

    挂载完成后获取数据

    解构loadProducts函数

    异步操作,这个action被saga接收

    * 实现商品列表数据展示 - 图4

    store/index中引入saga

    createSagaMiddleware创建sagaMiddleware中间件

    在store中通过applyMiddleware注册引入的中间件

    * 实现商品列表数据展示 - 图5

    root.saga合并所有saga,all方法接收的是数组

    * 实现商品列表数据展示 - 图6

    product.saga.js

    takeEvery接收action,put触发action

    * 实现商品列表数据展示 - 图7

    run方法启动所写rootsaga文件

    * 实现商品列表数据展示 - 图8

    具体请求数据过程

    npm install axios

    * 实现商品列表数据展示 - 图9

    * 实现商品列表数据展示 - 图10

    reducer中接收saveProducts这个action,因为需要向store中保存数据

    * 实现商品列表数据展示 - 图11

    测试数据是否成功保存在store中

    * 实现商品列表数据展示 - 图12

    展示商品列表数据

    * 实现商品列表数据展示 - 图13