如何在react/redux应用中正确获取数据？

在React/Redux应用中正确获取数据的方法有多种。下面是一种常见的做法：

定义Redux的action：在Redux中，action是一个纯JavaScript对象，用于描述发生的事件。可以创建一个action来请求数据，例如：

const fetchData = () => {
  return {
    type: 'FETCH_DATA',
  };
};

创建Redux的reducer：reducer是一个纯函数，用于根据action的类型来更新应用的状态。可以创建一个reducer来处理数据请求的action，例如：

const initialState = {
  data: null,
  loading: false,
  error: null,
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA':
      return {
        ...state,
        loading: true,
      };
    case 'FETCH_DATA_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload,
      };
    case 'FETCH_DATA_ERROR':
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

创建Redux的thunk中间件：thunk中间件允许我们在action中编写异步逻辑。可以使用redux-thunk库来创建thunk中间件，例如：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(dataReducer, applyMiddleware(thunk));

编写异步action：可以使用thunk中间件来编写异步action，例如：

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA' });

    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_DATA_ERROR', payload: error.message });
      });
  };
};

在组件中使用数据：可以使用React的Hooks或Redux的connect函数来将数据连接到组件中，例如：

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = ({ data, loading, error, fetchData }) => {
  useEffect(() => {
    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return <div>Data: {data}</div>;
};

const mapStateToProps = (state) => {
  return {
    data: state.data,
    loading: state.loading,
    error: state.error,
  };
};

export default connect(mapStateToProps, { fetchData })(MyComponent);

这样，当组件渲染时，会触发fetchData异步action来获取数据，并根据数据的状态显示不同的内容。

腾讯云相关产品和产品介绍链接地址：