Question

我对使用thunk getState有点新意我甚至尝试使用console.log方法并且什么都没得到。在状态中我看到loginReducer具有我需要进行API调用的键属性。 status(pin): true key(pin): "Ls1d0QUIM-r6q1Nb1UsYvSzRoaOrABDdWojgZnDaQyM"

我在这里有一项服务：

import axios from 'axios'
import {thunk, getState} from 'redux-thunk'
import MapConfig from '../components/map/map-config'

const origin = 'https://us.k.com/'



class KService {

  getNorthAmericaTimes() {
    return (dispatch, getState) => {
      const key = getState().key
      console.log('This is time key,', key)
      if (key) {
        dispatch(axios.get(`${origin}k51/api/datasets/k51_northamerica?key=${key}`))
      }
    }
    // const url = `${origin}k51/api/datasets/k51_northamerica?key=${urlKey}`
    // return axios.get(url)
  }
}

export default new K51Service()

然而，在我的相应行动中，我得到了Uncaught TypeError: _kService2.default.getNorthAmericaTimes(...).then is not a function

这就是动作功能的样子：

export function getKNorthAmericaTime(dispatch) {
  KService.getNorthAmericaTimes().then((response) => {
    const northAmericaTimes = response.data[0]
    dispatch({
      type: ActionTypes.SET_NORTH_AMERICA_TIMES,
      northAmericaTimes
    })
  })
}

我假设它可能与if块没有被执行有关。

Answer 1

您应该将axios.get()方法移动到您的操作创建者并将promise传递给redux thunk，然后在解析promise时使用响应数据调度该操作，以便reducer可以将其处理为应用程序的状态

操作

import axios from "axios"; export function fetchData() { return (dispatch, getState) => { const key = getState().key; const request = axios.get();// use your request code here request.then(({ response}) => { const northAmericaTimes = response.data[0] dispatch({ type: ActionTypes.SET_NORTH_AMERICA_TIMES, payload: northAmericaTimes}); }); }; }

这是一个使用带有redux-thunk的axios的一个非常简单的例子：

https://codesandbox.io/s/z9P0mwny

修改

对不起，我完全忘了在提出请求之前你需要去州。

正如您所看到的，转到函数中的状态，从中获取密钥，发出请求以及解决承诺时，使用响应数据调度操作。我已经更新了实时样本，因此您可以看到它正常工作。

再次抱歉......

使用getState访问还原状态的API以进行API调用

1 个答案: