Как сделать вызов API с помощью response-redux в функциональных компонентах

Question

Я пытаюсь заменить свое старое приложение реагирования только функциональным компонентом, и я застрял при вызове API с помощью «ax ios» в редуксе.

Это моя функция вызова API

 return new Promise((resolve, reject) => {
   return axios[method.toLowerCase()](path, data)
     .then(res => {
       return resolve(res.data);
     })
     .catch(err => {
       return reject(err.response.data.error);
     });
 });
} 

это для redux

export const loadCategories = categories => ({
  type: LOAD_CATEGORIES,
  categories
});

export const fetchCategories = () => {
  return dispatch => {
    return apiCall("get", "/api/categories/getall")
      .then(function(res) {
        dispatch(loadCategories(res));
      })
      .catch(function(err) {
        addError(err.message);
      });
  };
};

import { LOAD_CATEGORIES } from "../actionTypes";

const category = (state = [], action) => {
  switch (action.type) {
    case LOAD_CATEGORIES:
      return [...action.categories];
    default:
      return state;
  }
};

export default category;

Я просто пытаюсь выполнить fetchCategories ( ) функция

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchCategories } from "../store/actions/categories";
import { Link } from "react-router-dom";

const Nav = ({ categories }) => {
  useEffect(() => {
    fetchCategories();
  }, []);

  return <div/>;
};

function mapStateToProps(state) {
  return {
    categories: state.categories
  };
}

export default connect(mapStateToProps, { fetchCategories })(Nav);

но она вообще не вызывает API-вызов ...

Answer 1

Похоже, вы connect создаете действие fetchCategories, но на самом деле вы вызываете несвязанную версию.

Попробуйте позвонить fetchCategories из полученных реквизитов:

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchCategories } from "../store/actions/categories";
import { Link } from "react-router-dom";

// Note that we are calling now the connected version of fetchCategories
const Nav = ({ categories, fetchCategories }) => {
  useEffect(() => {
    fetchCategories();
  }, []);

  return <div/>;
};

function mapStateToProps(state) {
  return {
    categories: state.categories
  };
}

export default connect(mapStateToProps, { fetchCategories })(Nav);

Answer 2

Я бы предложил go с redux-thunk или redux-saga для обработки асин c потоков в реакции. Узнайте, как обрабатывать асинхронные потоки, используя redux-thunk -> https://github.com/reduxjs/redux-thunk. Узнайте, как обрабатывать асинхронные потоки с помощью redux-saga -> https://redux-saga.js.org/

Answer 3

Потому что вам нужно fetchCategories от реквизита, а не от ../store/actions/categories

const Nav = ({ categories, fetchCategories }) => {
  useEffect(() => {
    fetchCategories();
  }, []);

  return <div/>;
};