显示React Native Redux Saga API响应

我已经在React Native学习/工作了几个星期了，我正在努力掌握Redux和Redux-Sagas的工作 . 我已经尝试了几天研究这个并且（想）我得到了它的悬念，但不幸的是我仍在努力 . 以下是我阅读和尝试过的一些资源：

https://shift.infinite.red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de

https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8

我正在使用Ignite-CLI样板来创建一个查询API以获取天气数据的应用程序 . 当使用 apisauce 中的常规 api.get() 函数时，API请求会起作用，但我可以认为我对这个概念不够了解 .

这是我的 Api.js 文件，它使用 apisauce 从给定参数中获取JSON数据（这非常有效）

/App/Services/Api.js

// a library to wrap and simplify api calls
import apisauce from 'apisauce'

// our "constructor"
const create = (baseURL = 'https://my-api-url.com/api/') => {

  const apiId = 'xxxxxxx'
  const apiKey = 'xxxxxxxxxxxxxxxxx'
  const resortKey = 'xxxxxx'
  const apiParams = resortKey + '?app_id=' + apiId + '&app_key=' + apiKey

  const api = apisauce.create({
    // base URL is read from the "constructor"
    baseURL,
    // here are some default headers
    headers: {
      'Cache-Control': 'no-cache'
    },
    // 10 second timeout...
    timeout: 10000
  })

  const getReport = () => api.get(apiParams)

  return {
    getReport,
  }
}

// let's return back our create method as the default.
export default {
  create
}

Ignite CLI有一个很棒的生成器，可以自动生成redux动作和sagas . 以下是生成的文件：

/App/Redux/SnowReportRedux.js （Redux动作）

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

const { Types, Creators } = createActions({
  snowReportRequest: ['data'],
  snowReportSuccess: ['payload'],
  snowReportFailure: null
})

export const SnowReportTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  data: null,
  fetching: null,
  payload: null,
  error: null
})

/* ------------- Reducers ------------- */

// request the data from an api
export const request = (state, { data }) =>
  state.merge({ fetching: true, data, payload: null })

// successful api lookup
export const success = (state, action) => {
  const { payload } = action
  return state.merge({ fetching: false, error: null, payload })
}

// Something went wrong somewhere.
export const failure = state =>
  state.merge({ fetching: false, error: true, payload: null })

/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer(INITIAL_STATE, {
  [Types.SNOW_REPORT_REQUEST]: request,
  [Types.SNOW_REPORT_SUCCESS]: success,
  [Types.SNOW_REPORT_FAILURE]: failure
})

/App/Sagas/SnowReportSagas.js

import { call, put } from 'redux-saga/effects'
import SnowReportActions from '../Redux/SnowReportRedux'

export function * getSnowReport (api, action) {
  const { data } = action
  // make the call to the api
  const response = yield call(api.getReport, data)

  // success?
  if (response.ok) {
    yield put(SnowReportActions.snowReportSuccess(response.data))
  } else {
    yield put(SnowReportActions.snowReportFailure())
  }
}

然后，按照他们提供的示例，我将 SnowReportActions 从 SnowReportRedux.js 和 getSnowReport 函数从 SnowReportSagas.js 添加到根传奇函数中：

//...imports & constants

export default function * root () {
  yield all([
    // some sagas only receive an action
    takeLatest(StartupTypes.STARTUP, startup),

    // some sagas receive extra parameters in addition to an action
    takeLatest(SnowReportTypes.SNOW_REPORT_REQUEST, getSnowReport, api)
  ])
}

现在这里我感到困惑;如何在组件或屏幕中实际调用这些调度操作？我知道我必须 import SnowReport Actions from '../Redux/SnowReportRedux 和 mapDispatchToProps 但是我无法发送消息......以下是我的一个屏幕上的一些部分：

/App/Containers/ResortReportScreen.js

//.. constructor

componentDidMount () {
  this.props.getSnowReport();
}

// .. render() / close component

const mapDispatchToProps = (dispatch) => {
  return {
    getSnowReport: () => dispatch({ type: SnowReportActions.snowReportRequest() })
  }
}

export default connect(null, mapDispatchToProps)(ResortReportScreen)

当 componentDidMount () 函数触发时，应该 dispatch SnowReportActions.snowReportRequest() 动作，对吧？每当我使用 console.log() 返回该动作的响应时，它都不会被触发 . 我在这做错了什么？如何在使用 actions 时从我的API请求中获取数据？

我的 sagaMiddleware 和 reducers 都是由Ignite自动生成的 . 如果有必要展示那些只是问 .