reducer中http请求后的React Update状态

const initialState = {
  isLoading: true,
  data: null,
  error: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "HTTP_REQUEST_SUCCESS":
      return {
        ...state,
        isLoading: false,
        data: action.payload,
        error: null
      };
    case "HTTP_REQUEST_FAILURE":
      return {
        ...state,
        isLoading: false,
        data: null,
        error: action.payload
      };
    default:
      return state;
  }
};

import React, { useEffect, useReducer } from "react";

const initialState = {
  isLoading: true,
  data: null,
  error: null
};

const reducer = (state, action) => {
  switch (action.type) {
    case "HTTP_REQUEST_SUCCESS":
      return {
        ...state,
        isLoading: false,
        data: action.payload,
        error: null
      };
    case "HTTP_REQUEST_FAILURE":
      return {
        ...state,
        isLoading: false,
        data: null,
        error: action.payload
      };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    // 发起http请求
    fetch("https://api.example.com/data")
      .then(response => response.json())
      .then(data => {
        dispatch({ type: "HTTP_REQUEST_SUCCESS", payload: data });
      })
      .catch(error => {
        dispatch({ type: "HTTP_REQUEST_FAILURE", payload: error });
      });
  }, []);

  return (
    <div>
      {state.isLoading ? (
        <p>Loading...</p>
      ) : state.error ? (
        <p>Error: {state.error.message}</p>
      ) : (
        <p>Data: {state.data}</p>
      )}
    </div>
  );
};

export default MyComponent;