尝试使用API​​调用更新initialData

Question

我正在尝试使用API​​调用更新我的应用的initialData。

我收到错误：（0，_configureStore2.default）不是函数。

这是我的react / redux设置，

// app.js
import { Provider } from 'react-redux'
import configureStore  from './config/configureStore';

import AppNavigation from './navigation'
import { eventsFetchData } from './actions/events'

const store = configureStore();

// dispatch action to get array of events for app
store.dispatch(eventsFetchData());

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigation />
      </Provider>
    );
  }
}

我使用thunk来获取我的活动数据：

export const eventsHasErrored = bool => ({
        type: 'EVENTS_HAS_ERRORED',
        hasErrored: bool
})

export const eventsIsLoading = bool => ({
        type: 'EVENTS_IS_LOADING',
        isLoading: bool
})

export const eventsFetchDataSuccess = events => ({
        type: 'EVENTS_FETCH_DATA_SUCCESS',
        events
})

export function eventsFetchData(url) {
    return (dispatch) => {
        dispatch(eventsIsLoading(true));
        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }
                dispatch(eventsIsLoading(false));
                return response;
            })
            .then((response) => response.json())
            .then((events) => dispatch(eventsFetchDataSuccess(items)))
            .catch(() => dispatch(eventsHasErrored(true)));
    };
}

我的减速机是：

 export function eventsHasErrored(state = false, action) {
    switch (action.type) {
        case 'EVENTS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

export function eventsIsLoading(state = false, action) {
    switch (action.type) {
        case 'EVENTS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

export function events(state = [], action) {
    switch (action.type) {
        case 'EVENTS_FETCH_DATA_SUCCESS':

                return {
        ...state,
        ...action.events,
      };

        default:
            return state;
    }
}

export function calendarView(state = null, action) {
    switch (action.type) {
        case 'CALENDAR_VIEW':
            return action.viewType;

        default:
            return state;
    }
}

这是我的商店：

const initialState = {
    eventsHasErrored: false,
    eventsIsLoading: true,
    events: [],
    calendarView: 0
};

const reduxLogger = createLogger();

const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk, reduxPromise, reduxLogger)
);

export default store;

如何最好从api通话中更新我的initialState？

Answer 1

尝试：

// app.js
import { Provider } from 'react-redux'
import store  from './config/configureStore';

import AppNavigation from './navigation'
import { eventsFetchData } from './actions/events'

// dispatch action to get array of events for app
store.dispatch(eventsFetchData());

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigation />
      </Provider>
    );
  }
}

那是因为我看到你返回已经创建的商店，这将解释错误信息：

const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk, reduxPromise, reduxLogger)
);

export default store;