React Native中使用Rematch Store调用API加载渲染球员姓名

1. 修复models.js的请求错误 #

你用axios发起请求，返回的响应已经自动解析为JSON，不需要额外调用response.json()，这是Fetch API的用法，冗余的调用会导致请求报错。修改后的代码：

import axios from "axios";

export const players = {
  state: {
    players: [],
  },
  reducers: {
    SET_PLAYERS: (state, payload) => {
      return {
        ...state,
        players: payload,
      };
    },
  },
  effects: (dispatch) => ({
    async getPlayers() {
      let response = await axios.get(
        "https://www.balldontlie.io/api/v1/players"
      );
      // 直接取response.data即可，无需调用.json()
      let { data } = response;
      console.log(data);
      dispatch.players.SET_PLAYERS(data);
    },
  }),
};

2. 调整主页面代码结构 #

Redux的Provider必须放在整个应用的最外层，才能让所有内部组件访问到store。其次你需要用到react-redux的useDispatch、useSelector钩子来触发接口请求、获取全局状态，再用useEffect在组件加载时自动执行请求。修改后的代码：

import { StatusBar } from "expo-status-bar";
import React, { useEffect } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import { Provider, useDispatch, useSelector } from "react-redux";
import store from "./state_management/store";

export default function App() {
  return (
    <Provider store={store}>
      <View style={styles.container}>
        <Players />
        <StatusBar style="auto" />
      </View>
    </Provider>
  );
}

const Players = () => {
  const dispatch = useDispatch();
  // 从全局state中取players模块存储的球员数组
  const players = useSelector(state => state.players.players);

  // 组件加载完成后自动调用接口获取球员数据
  useEffect(() => {
    dispatch.players.getPlayers();
  }, [dispatch]);

  // 渲染单个球员项
  const renderPlayerItem = ({item}) => (
    <Text style={styles.playerText}>
      {item.first_name} {item.last_name}
    </Text>
  )

  return (
    <FlatList
      data={players}
      renderItem={renderPlayerItem}
      keyExtractor={item => item.id.toString()}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: 50,
  },
  playerText: {
    fontSize: 16,
    paddingVertical: 8,
    paddingHorizontal: 16,
  }
});

核心逻辑说明 #

• 组件挂载时，useEffect钩子触发getPlayers effect发起接口请求
• 接口返回数据后调用SET_PLAYERS reducer将数据存入全局状态
• useSelector订阅全局的players状态，状态更新后自动触发列表重新渲染

内容的提问来源于stack exchange，提问作者clattenburg cake