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

IT技术 javascript reactjs redux promise react-redux
2022-08-03 01:29:41

如何从 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 对象。因此，当我在有效负载中分配时，它变得未定义。当我将响应作为有效负载发送时，我应该如何操作它。

谁能给我一些建议？

2个回答

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

看看redux-thunk 中间件，它增加了对异步动作创建者的支持。

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

在您的情况下，一旦 Promise 解决，您将有一个allEmp动作创建者调用另一个动作：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,
    };
}

Promise 表示可能无法立即使用的异步进程。它们提供了一种在结果准备好时触发处理程序的方法（因此您的 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

其它你可能感兴趣的问题
上一篇如何访问组件的 ref？ 下一篇如何在可重用的react库中管理/打包依赖项