Question

如何在react-redux中从Promise Object获取普通的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对象。因此，当我在有效载荷中分配它时，它是未定义的。当我将响应作为有效载荷发送时，我该如何操纵它。

有人能给我一些建议吗？

Answer 1

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

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

使用redux-thunk的想法是，一旦异步代码解析，你的动作创建者将触发另一个动作。

在您的情况下，您将有一个allEmp动作创建者，在Promise结算后调用另一个动作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（正常动作创建者）

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

Answer 2

Promises表示可能无法立即使用的异步进程。它们提供了一种在结果准备就绪时触发处理程序的方法（因此您的Javascript可以继续并完成其他工作）。

要访问其结果，请将处理程序放在.then方法中，该方法在解析时调用，并将结果作为参数接收。

请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

您可以考虑编写您的函数：

export function allEmp() {
  p = new Promise();

  let url = "employees?access_token=";
  ApiCall.getApiCall(url)
  .then(function (response) {
     console.log("result",result);    
     p.resolve({
                type: "ALL_EMP",
                payload: response})
            })
   .catch(function (error) {
      console.log("error",error);  
     p.reject(error)
   });

 return p  // allEmp now returns a promise which gives it a .then() method to contain your handler code.
 }

然后像这样调用你的函数：

allEmp().then(
 function(res){/*handle it here, not called until async resolves, receives result*/},
 function(err){/*or resolves to error, receives error*/}
 )

您可能还会考虑使用await / async语法，这样看起来好像您的代码正在等待异步操作，并且在大多数情况下可以提高可读性。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

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

2 个答案: