API возвращает данные, но Redux не меняет состояние - PullRequest
Новая
       3

API возвращает данные, но Redux не меняет состояние

0 голосов
/ 22 марта 2020

Я использую Spring Boot для API, у меня есть метод, который возвращает все статьи из базы данных. Это метод GET, сопоставленный с / api / article. (Протестировано с почтальоном, оно работает как надо)

Кроме того, при проверке с расширением Redux я вижу, что состояние статей содержит только статью-заполнитель.

Нет ошибки в консоли. . Также важно, что дело GET_ARTICLES успешно вызывается (resp.data содержит все статьи).

Теперь на внешнем интерфейсе я использую Redux для хранения статей. Вот как выглядит мой Редуктор: 

import { GET_ARTICLES } from "../actions/types";
import repo from "../repository/axiosRepository";
const InitialState = {
  articles: [
    {
      title: "Lord of the rings",
      author: "JR Talkins",
      content: "lorem ipsum dolor sit amet",
      id: 1
    }
  ]
};

export default function(state = InitialState, action) {
  switch (action.type) {
    case GET_ARTICLES:
      repo.fetchArticles().then(resp => {
        return {
          articles: resp.data
        };
      });
    default:
      return state;
  }
}

И это мой компонент, в котором я хотел бы отобразить статьи: 

   import React, { Component } from 'react';
import Article from '../article/Article';
import articleService from '../../repository/axiosRepository';

import { connect } from 'react-redux';
import { getItems } from '../../actions/articleActions';

class HomePage extends Component {
    componentDidMount(){
      this.props.getItems();
    }

    render() {
        let { articles } = this.props.articles;

        return (
            <div className="container">
            <div className="row">
              <div className="col-md-9">
                {articles && articles.map(article => <Article key={article.id} article={article}/>)}
              </div>
              <div className="col-md-3">
                widgets
              </div>
            </div>
        </div>
        )
    }
}

const mapStateToProps = (state) => ({
  articles: state.articles
})
export default connect(mapStateToProps, {getItems})(HomePage);

Я не понимаю, зачем возвращать объект с resp.data не меняет состояние.

1 Ответ

0 голосов
/ 22 марта 2020

Я считаю, что проблема в этом в вашем редукторе. repo.fetchArticles() - это асинхронная c функция, она должна вызываться в вашем создателе действий следующим образом: 

function getItems() {
  repo.fetchArticles().then(resp => {
     return {
       type: GET_ARTICLES
       payload: resp.data
     };
   });
}

Получить данные в вашем создателе действия и вызвать редуктор с уже извлеченными данными. 

case GET_ARTICLES:
      return { articles: action.payload };
...