Как я могу обновить состояние реакции, используя axios (для получения данных json) и redux (для обновления состояния)?

Question

Я пытаюсь обновить значение состояния реакции, используя редукс. Для получения данных я использую axios, но данные нам не возвращаются и не обновляются. Когда я проверяю состояние с помощью инструмента приставки, состояние все еще остается пустым.

Вот от src / action / feedbacks.js. Здесь axios используется для возврата данных в формате json

import axios from "axios";

import { GET_FEEDBACKS } from "./types";

export const getFeedbacks = () => dispatch => {
  console.log(axios.get("/api/feedbacks/").res.data);
  axios
    .get("/api/feedbacks/")
    .then(res => {
      dispatch({
        type: GET_FEEDBACKS,
        payload: res.data
      });
    })
    .catch(err => console.log(err));
};

Этот код взят из src / redurs / feedbacks.js.

import { GET_FEEDBACKS } from "../actions/types.js";

const initialState = {
  feedbacks: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_FEEDBACKS:
      return {
        ...state,
        feedbacks: action.payload
      };
    default:
      return state;
  }
}

Этот код взят из src / components / feedbacks / Feedbacks.js

import React, { Component, Fragment } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";

import { getFeedbacks } from "../../actions/feedbacks";

export class Feedbacks extends Component {
  static propTypes = {
    feedbacks: PropTypes.array.isRequired
  };

  ComponentDidMount() {
    this.props.getFeedbacks();
  }
  render() {
    return (
      //some return code
    );
  }
}
const mapStateToProps = state => ({
  feedbacks: state.feedbacks.feedbacks
});
export default connect(
  mapStateToProps,
  { getFeedbacks }
)(Feedbacks);

Answer 1

Возможно, вы сможете получить это обновление на componentDidUpdate или сделать это с помощью хуков.

Попробуйте что-то вроде этого:

import React, {useEffect} from "react";
import {connect} from "react-redux";
import PropTypes from "prop-types";

import {getFeedbacks} from "../../actions/feedbacks";

export const Feedbacks = props => {
    const {feedbacks, getFeedbacks} = props

    useEffect(() => {
        getFeedbacks();
    }, [])

    return (
       //some return code
    )
}

Feedbacks.propTypes = {
    feedbacks: PropTypes.array.isRequired
};

const mapStateToProps = state => ({
    feedbacks: state.feedbacks.feedbacks
});

export default connect(
    mapStateToProps,
    {getFeedbacks}
)(Feedbacks);

При обновлении с избыточностью этот компонент получает json feedbacks, поэтому при его монтировании, возможно, вам следует проверить, есть ли в feedbacks данные или нет, прежде чем манипулировать ими.