在Reactjs Redux Redux-thunk中进行依赖api调用的正确方式是什么

在Reactjs Redux Redux-thunk中进行依赖API调用的正确方式是使用异步action和thunk中间件。

首先，确保已经安装了redux和redux-thunk依赖包。
创建一个异步action，它将负责调用API并在获取响应后分发相应的同步action。例如：

// 异步action
export const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest()); // 发起请求前的同步action
    fetch('https://api.example.com/data') // 调用API
      .then(response => response.json())
      .then(data => {
        dispatch(fetchDataSuccess(data)); // 获取数据成功后的同步action
      })
      .catch(error => {
        dispatch(fetchDataFailure(error)); // 获取数据失败后的同步action
      });
  };
};

// 同步action
export const fetchDataRequest = () => {
  return {
    type: 'FETCH_DATA_REQUEST'
  };
};

export const fetchDataSuccess = (data) => {
  return {
    type: 'FETCH_DATA_SUCCESS',
    payload: data
  };
};

export const fetchDataFailure = (error) => {
  return {
    type: 'FETCH_DATA_FAILURE',
    payload: error
  };
};

在Redux store中应用redux-thunk中间件。在创建store时，使用applyMiddleware函数将thunk中间件应用于store。例如：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

在React组件中使用异步action。在需要调用API的组件中，使用connect函数将组件连接到Redux store，并将异步action作为props传递给组件。例如：

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

const MyComponent = ({ fetchData, data, loading, error }) => {
  useEffect(() => {
    fetchData(); // 组件挂载时调用异步action
  }, []);

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

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

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

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

这样，当组件挂载时，异步action将被调用，发起API请求并更新Redux store中的状态。组件将根据状态渲染相应的内容。

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