javascript - 如何从 react-redux 中的 Promise 对象获取普通的 json 对象

标签 javascript reactjs redux promise react-redux

<分区>

如何在 react-redux 中从 Promise 对象获取普通的 JSON 对象？

我的 action.js 包含:

  export function allEmp() {
      let url = "employees?access_token=";
      let result = ApiCall.getApiCall(url)
      .then(function (response) {
         return response;
       })
       .catch(function (error) {
         return error;
       });
       console.log("result",result);
       return {
         type: "ALL_EMP",
         payload: new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(result);
                }, 2000);
            })
       };
     }

我的 API 调用配置是:

getApiCall(url) {
    let base_url = "http://192.168.1.151:3000/api/";
    let api_token = "1f7169e92c1d0722db575b877707cf0b88b8f0ad";
    let fetch_url = base_url + url + api_token;
    let myHeaders = new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    });
    return fetch(fetch_url, {
      method: "GET",
      headers: myHeaders
    })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      } else {
        var error = new Error(response.statusText);
        error.response = response;
        throw error;
      }
    })
    .then(function(json) {
      return json;
     })
  }

我的 store.js :

import {createStore, combineReducers, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";

import userDetails from "./reducers/User_reducer";

export default createStore(
    combineReducers({
        userDetails
    }),
    {},
    applyMiddleware(thunk, promise())
);

但结果是我得到了 Promise 对象。因此，当我在有效负载中分配时，它变得不确定。当我将响应作为负载发送时，我应该如何操作它。

谁能给我一些建议？

最佳答案

react-redux 不支持开箱即用的异步操作创建器，因此您需要向项目添加依赖项。

看看 redux-thunk middleware ，它增加了对异步 Action 创建者的支持。

redux-thunk 的想法是，一旦异步代码解析，您的 Action 创建者将触发另一个 Action 。

在您的情况下，您将拥有一个 allEmp Action 创建者，它会在 Promise 解析后调用另一个 Action receiveAllEmp:

allEmp Action Creator(使用 redux-thunk)

export function allEmp() {

    return (dispatch) => {

        return ApiCall.getApiCall(url).then((response) => {

            // Dispatch the receiveAllEmp action

            dispatch(receiveAllEmp(response));

            return response;
        });
    };
}

receiveAllEmp Action Creator(普通 Action 创建器)

export function receiveAllEmp(response) {
    return {
        type: "ALL_EMP",
        payload: response,
    };
}

关于javascript - 如何从 react-redux 中的 Promise 对象获取普通的 json 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48162063/

上一篇：javascript - 如何触发Graphic的点击事件？

下一篇：javascript - 如何用星号替换 MongoDB 连接字符串中的密码 - JavaScript？

javascript - 使用 ng-init 的 select 的默认值

reactjs - 无法读取未定义的属性 'push' - React 错误

ios - 如何在具有多个子选择的 ReSwift 中定义 `newState`？

javascript - 在存储监听器中调用另一个操作是否是 Flux 的反模式？

javascript - 如果显示 bootstrap 下拉列表，jQuery 在悬停在一定宽度上时添加类

javascript - npx create-nuxt-app <project-name> 不工作

javascript - 使用react Flux架构通过AJAX发送数据

reactjs - 如何在 TypeScript 中使用 React、Redux 进行 API 调用

javascript - 将 own-props 命名空间与 state-props 分开是一种有用的模式吗？