9-5 创建首页model，更换轮播图的数据

在本节中，我们将学习如何使用 Dva 管理状态，并从后台获取数据以更新轮播图。

一、启动 YAPI 服务

YAPI 是一个强大的 API 管理平台，用于模拟后台接口。以下是启动 YAPI 服务的步骤：

1. 启动 MongoDB 服务： 如果尚未安装 MongoDB，请先安装并启动服务。可以通过以下命令启动 MongoDB：

   brew services start mongodb-community
   

2. 启动 YAPI 服务： 打开终端并导航到 YAPI 项目目录：

   cd Desktop/bear-yapi
   node vendors/server/app.js
   

3. 登录 YAPI 平台： 打开浏览器并访问 YAPI 管理后台，使用以下账号登录：

   • 账号：amdin@admin.com
   • 密码：ymfe.org

二、轮播图接口数据结构

以下是一个轮播图接口的示例数据结构：

{
  "state": 100,
  "data": [
    {
      "id": "320000199510271253",
      "image": "http://file06.16sucai.com/2016/0726/656a4cc534888e6e74b3ce992a2af8f6.jpg",
      "colors": [
        "#c179f2",
        "#79f29d"
      ]
    }
  ],
  "msg": "success"
}

• state：接口状态码，100 表示成功。
• data：轮播图数据数组，每个对象包含 id、image 和 colors 属性。
• msg：接口返回的信息。

三、安装 Axios

Axios 是一个基于 Promise 的 HTTP 库，用于处理 HTTP 请求。使用以下命令安装 Axios：

yarn add axios

四、配置 Axios

在 config/http.ts 中配置 Axios 的基本设置：

import axios from 'axios';
import Config from 'react-native-config';

// 设置基础 URL
axios.defaults.baseURL = Config.API_URL || 'http://192.168.0.2:3000';

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    console.log('--config', config);
    return config;
  },
  (error) => Promise.reject(error),
);

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    console.log('------response', response);
    return response.data;
  },
  (error) => Promise.reject(error),
);

五、配置环境变量

在项目的根目录下，编辑 .env 文件，设置 API 地址：

API_URL=http://192.168.0.2:3000

六、创建首页 Model

在 models/home.ts 中定义首页 Model：

import { Model, Effect, Reducer } from 'dva-core-ts';
import { ICarousel } from '@/pages/Home/types';

export interface HomeModelState {
  carousels: ICarousel[];
}

export interface HomeModel extends Model {
  namespace: 'home';
  state: HomeModelState;
  effects: {
    fetchCarousels: Effect;
  };
  reducers: {
    setState: Reducer<HomeModelState>;
  };
}

const homeModel: HomeModel = {
  namespace: 'home',
  state: {
    carousels: [],
  },
  effects: {
    *fetchCarousels({ payload }, { call, put }) {
      const { data } = yield call(axios.get, '/mock/11/bear/carousel');
      if (data.state === 100) {
        yield put({
          type: 'setState',
          payload: {
            carousels: data.data,
          },
        });
      }
    },
  },
  reducers: {
    setState(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
  },
};

export default homeModel;

七、更新组件

在 pages/Home/index.tsx 中绑定状态并更新组件：

import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import Carousel from './Carousel';
import { ICarousel } from './types';

interface IProps {
  carousels: ICarousel[];
}

class Home extends React.Component<IProps> {
  componentDidMount() {
    // 在这里发起请求获取数据
  }

  renderItem = ({ item }: { item: ICarousel }) => {
    return (
      <View>
        <Image source={{ uri: item.image }} style={{ width: '100%', height: 200 }} />
      </View>
    );
  };

  render() {
    const { carousels } = this.props;
    return (
      <View style={{ flex: 1 }}>
        <Carousel data={carousels} renderItem={this.renderItem} />
      </View>
    );
  }
}

const mapStateToProps = ({ home }: { home: HomeModelState }) => ({
  carousels: home.carousels,
});

export default connect(mapStateToProps)(Home);

八、总结

在本节中，我们学习了如何使用 Dva 管理状态，并从后台获取数据以更新轮播图。通过配置 Axios 和 Dva Model，我们实现了数据的动态获取和绑定。下一节，我们将学习如何完成首页中的猜你喜欢卡片。