所以我检查this question因为它看起来很相似。但这没有帮助。
版本:
react@16.0.0-alpha.12
react-native@0.47.2
react-redux@5.0.6
redux@3.7.2
结构:
|index.android.js
|src
|actions
|peopleActions
|peopleConst
|reducers
|index
|reducers-people
|components
|configureStore
actions / peopleConst.js:
export const FETCHING_PEOPLE = 'FETCHING_PEOPLE'
export const FETCHING_PEOPLE_SUCCESS = 'FETCHING_PEOPLE_SUCCESS'
export const FETCHING_PEOPLE_FAILURE = 'FETCHING_PEOPLE_FAILURE'
actions / peopleActions.js:
import {
FETCHING_PEOPLE,
FETCHING_PEOPLE_SUCCESS,
FETCHING_PEOPLE_FAILURE } from './peopleConst'
export function fetchPeopleFromAPI() {
return(dispatch) => {
dispatch(getPeople())
fetch('https://swapi.co/api/people/')
.then(res => res.json())
.then(json => dispatch(getPeopleSuccess(json.results)))
.catch(err => dispatch(getPeopleFailure(err)))
}
}
function getPeople(){
return {
type:FETCHING_PEOPLE
}
}
function getPeopleSuccess(data){
return {
type:FETCHING_PEOPLE_SUCCESS,
data
}
}
function getPeopleFailure(){
return {
type:FETCHING_PEOPLE_FAILURE
}
}
减速器/减速器 - 人:
import {
FETCHING_PEOPLE,
FETCHING_PEOPLE_SUCCESS,
FETCHING_PEOPLE_FAILURE } from '../actions/peopleConst'
const initialState = {
people: [],
isFetching: false,
error: false
}
export default function peopleReducer(
state = { // <= Also tried state={initialState}
people: [],
isFetching: false,
error: false }, action) {
switch(action.type) {
case "FETCHING_PEOPLE":
return {
...state,
isFetching: true,
people: []
}
case "FETCHING_PEOPLE_SUCCESS":
return {
...state,
isFetching: false,
people: action.data
}
case "FETCHING_PEOPLE_FAILURE":
return {
...state,
isFetching: false,
error: true
}
defualt:
return state
}
}
减速器/索引:
import { combineReducers } from 'redux';
import peopleReducer from './reducers-people';
const allReducers = combineReducers({
people: peopleReducer
});
export default allReducers;
components / configureStore:
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk';
import rootReducer from '../reducers'
const myLogger = (store) => (next) => (action) => {
console.log("Logged Action: ", action);
next(action);
}
const middleware = applyMiddleware(logger, thunk);
export default function configureStore(){
let store = createStore(rootReducer, {}, middleware)
return store
}
reducer没有空状态,并且在定义状态时预定义并使用initialState,如:
export default function peopleReducer(
state = { // <= Also tried state={initialState}
people: [],
isFetching: false,
error: false }, action) {
但它仍然失败了这个错误。我做错了什么?