时间戳

首页 > 解决方案 > 即使在实施后自定义中间件错误

javascript - 即使在实施后自定义中间件错误

问题描述

我通过需要自定义中间件的 Async-Await 使用 API 调用，我使用 Thunk 作为自定义中间件。已安装所有依赖项。然后，不知何故，它无法检测到中间件或类似的东西。

我的代码在执行时显示以下错误： 错误页面

这是我的操作页面：我使用了 Async-Await 导致我出现此错误

import axios from "axios";

export const saveTwitterToken = (token) => {
  return ({
    type: TWITTER_OAUTH,
    payload: token
  });
};

export const callTwitterAPI = async (config) => {
  const request = await axios({
    "url": "https://api.twitter.com/1.1/statuses/home_timeline.json",
    "method": "GET",
    "headers": {
      "Authorization": " _Something_ "
    }
  });
  return ({
    type: "api",
    payload: request
  })
};

这是我的Index.js页面：

import React from "react";
import ReactDOM from "react-dom";
import App from './App'
import {Provider} from "react-redux";

import 'bootstrap/dist/css/bootstrap.css';
import stores from "./utils/store";

ReactDOM.render(
    <Provider store={stores}>
      <App/>
    </Provider>
    , document.getElementById('root'));

这是自定义中间件存储文件：

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import reducers from '../reducers';

const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(thunk)
  )
);
export default store;

标签： javascriptreactjsreduxredux-thunk

解决方案

您必须对异步 Redux Action 使用调度，如下所示：

export const callTwitterAPI = config => async dispatch => {
  const request = await axios({
    "url": "https://api.twitter.com/1.1/statuses/home_timeline.json",
    "method": "GET",
    "headers": {
      "Authorization": " _Something_ "
    }
  });

  dispatch({
    type: "api",
    payload: request
  })
}

更好的方法是使用 promise 如下：

export const callTwitterAPI = config => dispatch => {
  axios({
    "url": "https://api.twitter.com/1.1/statuses/home_timeline.json",
    "method": "GET",
    "headers": {
      "Authorization": " _Something_ "
    }
  }).then(request =>
     dispatch({
       type: "api",
       payload: request
     })
  ).catch(error => handle it OR dispatch another action)
}

我希望它对你有帮助。

推荐阅读