react---redux-thunk 有异步action和接口配合使用

/src/api/movies.js 封装接口

export function loadMovies() {
  return fetch(
    "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=4&data_type=1&mode=24&page_id=1&ret_num=48"
  ).then((res) => res.json());
}

/src/store/actions/product.js dispatch派送内容的封装

import { loadMovies } from "../../api/movies";
export const loaDataAction = () => async (dispatch) => {
  const res = await loadMovies();
  dispatch({
    type: "LOAD_DATA_END",
    payload: res.data.list,
  });
  // loadMovies().then((res) => {
  //   console.log(res);
  //   dispatch({
  //     type: "LOAD_DATA_END",
  //     payload: res.data.list,
  //   });
  // });
};

/src/store/reducers/product.js 定意思一个product的reducer

export default function product(state = { list: [], page: 1 }, action) {
  // console.group("product reducer");
  // console.log(state);
  // console.log(action);
  // console.groupEnd();
  switch (action.type) {
    case "LOAD_DATA_END":
      return { ...state, list: action.payload };
    default:
      return state;
  }
}

/src/component/Movies.jsx 页面

import React, { Component } from "react";
import { connect } from "react-redux";

class Movies extends Component {
  render() {
    return <div>{this.props.list.length}</div>;
  }
}

export default connect((state) => state.product)(Movies); //函数返回的是啥 上面的props就是啥

/src/App.js 引入redux中的数据

import React from "react";
import { connect } from "react-redux";
import logo from "./logo.svg";
import "./App.css";
import Counter from "./components/Counter";
import Movies from "./components/Movies";
import { addAction, reduceAction, asyncAdd } from "./store/actions/counter";
import { loaDataAction } from "./store/actions/product";

function App(props) {
  console.log(props);
  const { count, dispatch } = props;
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => dispatch(addAction(5))}>加</button>
      <button onClick={() => dispatch(reduceAction(1))}>减</button>
      <button onClick={() => dispatch(asyncAdd(1))}>异步加</button>
      <Counter />
      <Movies />
      <button
        onClick={() => {
          dispatch(loaDataAction());
        }}
      >
        加载数据
      </button>
    </div>
  );
}

// state表示所有的数据
function mapStateToProps(state) {
  return state.counter;
}

// 通过connect可以把redux中的state数据和dispatch方法映射到组件的属性中
// export default connect(mapStateToProps)(App);

export default connect((state) => state.counter)(App);