制作了一个具有较小形式的原型，然后移至更大的应用程序

Question

• 我能够以Redux格式https://codesandbox.io/s/1vq8j73jn4加载加载栏
• 因此，按照相同的逻辑，我尝试将栏加载到我的api请求中。
• 发出一个请求，我需要加载加载栏，然后需要获取响应，
• 请求正在RecipeReviewCardList.js文件内部以及方法getPlayerssData内部
中进行
• 因为用户不知道发生了什么。
• 我通过将控制台放入请求进行调试，并且存储仍然无法弄清
• 你能告诉我如何解决吗
• 以便将来我将其修复以用于更大的应用

https://codesandbox.io/s/kxqppprjv

RecipeReviewCardList.js

  getPlayerssData() {
    this.setState({ loading: true });

    let comments = [];
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then(response => response.json())
      .then(json => {
        console.log("store--->", json);
        store.dispatch(showLoading("sectionBar"));
        comments = json;
        // store.dispatch(hideLoading("sectionBar"));
        // comments = comments.slice(0,3);
        this.setState({
          loading: false,
          comments: comments
        });
        this.setState({ activeComments: comments.slice(0, 10) });
        //console.log(comments);
      });
  }

store.js

import { createStore, combineReducers } from "redux";
import { reducer as reduxFormReducer } from "redux-form";
import { loadingBarReducer } from "react-redux-loading-bar";

const reducer = combineReducers({
  form: reduxFormReducer, // mounted under "form"
  loadingBar: loadingBarReducer
});
console.log("loadingBarReducer reducer--->", reducer);
const store = (window.devToolsExtension
  ? window.devToolsExtension()(createStore)
  : createStore)(reducer);
console.log("loadingBarReducer store--->", store);

export default store;