我一直在研究/使用React Native几个星期,现在我试图掌握使用Redux和Redux-Sagas。我已经尝试了几天的研究,并且(想)我已经掌握了它,但不幸的是我还在挣扎。这里有一些资源,我已阅读并尝试:Display React Native Redux Saga API响应
https://hackernoon.com/moving-api-requests-to-redux-saga-21780f49cbc8
我使用Ignite-CLI样板创建,查询天气数据的API的应用程序。该API请求在使用apisauce
中的常规api.get()
函数时起作用,但我无法获得Redux Saga操作来返回数据。我想我只是不明白这个概念。
这里是我的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
}
点燃CLI有一个真棒生成器,自动生成redux动作和sagas。下面是这些生成的文件:
/App/Redux/SnowReportRedux.js(终极版操作)
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())
}
}
然后,遵循他们提供的示例,我将SnowReportRedux.js
中的SnowReportActions
和SnowReportSagas.js
中的getSnowReport
函数添加到roo t传奇功能如下:
//...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自动生成的。如果有必要展示那些只是问。
结帐[这里]我的回购协议(HTTPS对象的方法甚至简化代码:// github.com/pritishvaidya/create-react-native-redux-app)和一个示例。 –