не могу загрузить сообщение из API

Question

Я пытаюсь получить сообщение из API, используя RedEx, но он не загружает сообщение из API. Он загружает фиктивные фрагменты, которые я создал в initialState, но не сообщения, которые сохраняются в базе данных с помощью API. Что я делаю, пытаясь извлечь сообщения из моего API?

Файл моего действия, на котором я сделал вызов API

import { SAVE_POST, UPDATE_POST, RETRIEVE_POST, HOME_LOADED } from "./types";
import axios from "axios";
export const savePost = ({
  snippetId,
  snippetDescription,
  snippetTitle
}) => async dispatch => {
  const config = {
    headers: {
      "Content-Type": "application/json"
    }
  };
  let snippetData = { snippetId, snippetDescription, snippetTitle };
  try {
    if (snippetId == null) {
      const res = await axios.post(
        "/api/save",
        JSON.stringify(snippetData),
        config
      );
      snippetData.snippetId = res.data;
      dispatch({
        type: SAVE_POST,
        payload: snippetData
      });
    } else {
      await axios.post("/api/update", JSON.stringify(snippetData), config);
      dispatch({
        type: UPDATE_POST,
        payload: snippetData
      });
    }
  } catch (err) {
    console.log(err);
  }
};

// Retrieve post

export const retrievePost = snippetId => async dispatch => {
  try {
    const res = await axios.post(`/api/snippetdata/${snippetId}`);
    dispatch({
      type: RETRIEVE_POST,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

//Retrieve all the post
export const onLoad = () => async dispatch => {
  try {
    const res = await axios.post(`/api/mysnippets/`);
    dispatch({
      type: HOME_LOADED,
      payload: res.data
    });
  } catch (err) {
    console.error(err);
  }
};

на домашней странице, где я вызываю действие для получения сообщение

import React from "react";
// import axios from "axios";
import { Link } from "react-router-dom";
import { onLoad, setEdit } from "./actions/posts";
import { connect } from "react-redux";

// import { Form } from "../../components/Article";

class Home extends React.Component {
  // constructor(props) {
  //   super(props);
  // }

  componentDidMount() {
    //Load all the snippets
    onLoad(); // this isn't loading the post from server
  }

  render() {
    const { snippets } = this.props;
    console.log(this.props);
    let view;
    if (snippets) {
      view = snippets.map(snippet => {
        return (
          <div className="card my-3" key={snippet.snippetId}>
            <div className="card-header">{snippet.title}</div>
            <div className="card-body">{snippet.snippetDescription}</div>
            <div className="card-footer">
              <div className="row">
                <button
                  // onClick={() => this.handleEdit(snippet)}
                  className="btn btn-primary mx-3"
                >
                  <Link to={`/editor/:${snippet.snippetId}`}>Edit</Link>
                </button>
              </div>
            </div>
          </div>
        );
      });
    }

    return (
      <div className="container">
        <div className="row pt-5">
          <div className="col-12 col-lg-6 offset-lg-3">
            <h1 className="text-center">Snippets</h1>
          </div>
        </div>
        <div className="row pt-5">
          <div className="col-12 col-lg-6 offset-lg-3">{view}</div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  snippets: state.snippets,
  snippetData: state.snippetData
});

export default connect(
  mapStateToProps,
  { onLoad, setEdit }
)(Home);

редуктор. js

import {
  SAVE_POST,
  UPDATE_POST,
  RETRIEVE_POST,
  HOME_LOADED
} from "../actions/types";

import { initialState } from "../store";

export default function(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SAVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case UPDATE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case RETRIEVE_POST:
      return {
        ...state,
        snippetData: payload
      };
    case HOME_LOADED:
      return {
        ...state,
        snippets: payload
      };
    case "SET_EDIT":
      return {
        ...state,
        snippetToEdit: action.snippet
      };
    default:
      return state;
  }
}

коды и ящики всего веб-приложения

Answer 1

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import posts from "./reducers/posts";

export const initialState = {
  snippets: [
    {
      snippetId: "1",
      snippetTitle: "test",
      snippetDescription: "test test"
    },
    {
      snippetId: "2",
      snippetTitle: "post2",
      snippetDescription: "post 2 post2"
    }
  ],
  snippetData: {
    snippetId: null,
    snippetTitle: null,
    snippetDescription: null
  }
};
const store = createStore(posts, applyMiddleware(thunk));
export default store;

Выше хранится файл. js, который необходимо обновить с помощью промежуточного программного обеспечения.

Поскольку вы выполняете сетевые вызовы, вы должны использовать промежуточное программное обеспечение, такое как redux thunk, для обработки асинхронных сообщений c Операции как basi c Хранилище с избыточностью позволяет выполнять только синхронные обновления, но не asyn c. Это помогает нам вернуть функцию, а не действие. Надеюсь, это поможет!

//Dispatch function:
    export const onLoad = () => {
      return async dispatch => {
        console.log("dispatched");
        try {
          const res = axios.post(`/api/mysnippets/`);
          dispatch({
            type: HOME_LOADED,
            payload: res.data
          });
    } catch (err) {
      console.error(err);
    }
  };
};