我使用React Native创建了一个应用程序,并希望使用redux-saga从API获取数据。
在配置我的redux和sagas之前,一切正常。
这是我添加和修改的:
ReactRestoRedux.js
import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'
// Categories types
const { Types, Creators } = createActions({
categories: null,
categoriesSucceed: ['payload'],
categoriesFailed: null
})
export const ReactRestoTypes = Types
export default Creators
// Initial state
export const INITIAL_STATE = Immutable({
payload: null,
errorMessage: null,
fetchCategories: false
})
// Reducers
export const categoriesRequest = (state) =>
state.merge({ fetchCategories: true })
export const categoriesRequestSucceed = (state, action) => {
const { payload } = action
return state.merge({ fetchCategories: false, errorMessage: null, payload})
}
export const categoriesRequestFailed = (state) =>
state.merge({ fetchCategories: false, errorMessage: true})
export const reducer = createReducer(INITIAL_STATE, {
[Types.CATEGORIES_REQUEST]: categoriesRequest,
[Types.CATEGORIES_SUCCEED]: categoriesRequestSucceed,
[Types.CATEGORIES_FAILED]: categoriesRequestFailed
})
index.js(redux)
import { takeLatest, all } from 'redux-saga/effects'
//import API from '../Services/Api'
import FixtureAPI from '../Services/FixtureApi'
import DebugConfig from '../Config/DebugConfig'
import ZomatoAPI from '../Services/ZomatoAPI'
/* ------------- Types ------------- */
import { StartupTypes } from '../Redux/StartupRedux'
import { GithubTypes } from '../Redux/GithubRedux'
import { ReactRestoTypes } from '../Redux/ReactRestoRedux'
/* ------------- Sagas ------------- */
import { startup } from './StartupSagas'
import { getUserAvatar } from './GithubSagas'
import { getCategories } from './ReactRestoSagas'
/* ------------- API ------------- */
// The API we use is only used from Sagas, so we create it here and pass along
// to the sagas which need it.
const api = DebugConfig.useFixtures ? FixtureAPI : ZomatoAPI.create()
/* ------------- Connect Types To Sagas ------------- */
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(GithubTypes.USER_REQUEST, getUserAvatar, api),
takeLatest(ReactRestoTypes.CATEGORIES_REQUEST, getCategories)
])
}
ReactRestoSagas.js
import { call, put } from 'redux-saga/effects'
import { path } from 'ramda'
import ReacRestoActions from '../Redux/ReactRestoRedux'
import ReactRestoAPI from '../Services/ZomatoAPI'
const api = ReactRestoAPI.create()
export function* getCategories(){
const response = yield call(api.getCategories)
if(response.ok){
//ok, call action from redux
yield put(ReacRestoActions.categoriesSucceed(payload))
}else{
yield put(ReacRestoActions.categoriesFailed())
}
}
index.js(佐贺)
import { takeLatest, all } from 'redux-saga/effects'
//import API from '../Services/Api'
import FixtureAPI from '../Services/FixtureApi'
import DebugConfig from '../Config/DebugConfig'
import ZomatoAPI from '../Services/ZomatoAPI'
/* ------------- Types ------------- */
import { StartupTypes } from '../Redux/StartupRedux'
import { GithubTypes } from '../Redux/GithubRedux'
import { ReactRestoTypes } from '../Redux/ReactRestoRedux'
/* ------------- Sagas ------------- */
import { startup } from './StartupSagas'
import { getUserAvatar } from './GithubSagas'
import { getCategories } from './ReactRestoSagas'
/* ------------- API ------------- */
// The API we use is only used from Sagas, so we create it here and pass along
// to the sagas which need it.
const api = DebugConfig.useFixtures ? FixtureAPI : ZomatoAPI.create()
/* ------------- Connect Types To Sagas ------------- */
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(GithubTypes.USER_REQUEST, getUserAvatar, api),
takeLatest(ReactRestoTypes.CATEGORIES_REQUEST, getCategories)
])
}
我希望我能得到任何帮助,被困在这里好几个小时
答案 0 :(得分:0)
问题出在您的ReactRestoRedux.js
。
const { Types, Creators } = createActions({
categories: null,
categoriesSucceed: ['payload'],
categoriesFailed: null
})
与
不匹配export const reducer = createReducer(INITIAL_STATE, {
[Types.CATEGORIES_REQUEST]: categoriesRequest,
[Types.CATEGORIES_SUCCEED]: categoriesRequestSucceed,
[Types.CATEGORIES_FAILED]: categoriesRequestFailed
})
您已将categories
键修改为categoriesRequest
,如下所示
const { Types, Creators } = createActions({
categoriesRequest: null,
categoriesSucceed: ['payload'],
categoriesFailed: null
})