// store/actionCreators.jsx

import { CHANGE_BANNERS, CHANGE_RECOMMENDS } from "./constants"

export const changeBannersAction = (banners) => ({
  type: CHANGE_BANNERS,
  banners
})
export const changeRecommendsAction = (recommends) => ({
  type: CHANGE_RECOMMENDS,
  recommends
})

// store/reducer.jsx

import { CHANGE_BANNERS, CHANGE_RECOMMENDS } from "./constants"

const initialState = {
  banners: [],
  recommends: []
}

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case CHANGE_BANNERS:
      return {...state, [banners: action.banners}
    case CHANGE_RECOMMENDS:
      return {...state, recommends: action.recommends}
    default: 
      return state
  }
}

import React, { PureComponent } from 'react'
import axios from 'axios'
import { connect } from 'react-redux'
import { changeBannersAction, changeRecommendsAction } from '../store/actionCreators'

export class Category extends PureComponent {

  componentDidMount() {
    // 發(fā)送網絡請求, 獲取到banners和recommends數據
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list
      console.log(banners, recommends)

      // 調用映射過來的方法, 修改banners和recommends 
      this.props.changeBanners(banners)
      this.props.changeRecommends(recommends)
    })
  }

  render() {
    return (
      <div>Category</div>
    )
  }
}

// 映射方法用于修改store中的banners和recommends
const mapDispatchToProps = (dispatch) => ({
  changeBanners(banners) {
    dispatch(changeBannersAction(banners))
  },
  changeRecommends(recommends) {
    dispatch(changeRecommendsAction(recommends))
  }
})

export default connect(null, mapDispatchToProps)(Category)

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

export class About extends PureComponent {

  render() {
    // 在props中獲取到映射過來的數據
    const { banners, recommends } = this.props

    return (
      <div>
        <h2>輪播圖展示</h2>
        <ul>
          {
            banners.map(item => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>

        <h2>推薦數據展示</h2>
        <ul>
          {
            recommends.map(item => {
              return <li key={item.acm}>{item.title}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  banners: state.banners,
  recommends: state.recommends
})

// 表示將數據映射到About組件中
export default connect(mapStateToProps)(About)

import { createStore, applyMiddleware } from "redux";
import reducer from "./reducer";
// 導入中間件
import thunk from "redux-thunk";

// 應用中間件
const store = createStore(reducer, applyMiddleware(thunk))

export default store

// 定義一個返回函數的action
export const fetchHomeMultidataAction = () => {
  function foo() {
    console.log("aaa")
  }

  return foo
}

// 派發(fā)action
const mapDispatchToProps = (dispatch) => ({
  fetchHomeMultidata() {
    // 派發(fā)一個函數, 內部返回的函數自動執(zhí)行
    dispatch(fetchHomeMultidataAction())
  }
})

import axios from "axios"

export const changeBannersAction = (banners) => ({
  type: CHANGE_BANNERS,
  banners
})
export const changeRecommendsAction = (recommends) => ({
  type: CHANGE_RECOMMENDS,
  recommends
})

export const fetchHomeMultidataAction = () => {
  // 派發(fā)時返回的該函數自動執(zhí)行, 且傳入兩個參數dispatch, getState
  return (dispatch, getState) => {
    axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
      const banners = res.data.data.banner.list
      const recommends = res.data.data.recommend.list

      // 獲取到數據后在派發(fā)action
      dispatch(changeBannersAction(banners))
      dispatch(changeRecommendsAction(recommends))
    })
  }
}