Trying to update initialData with API call - reactjs

Question

I am trying to update the initialData for my app with an API call.
I am getting the error: (0,_configureStore2.default) is not a function.
Here is my react/ redux setup,
// 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>
);
}
}
I am using a thunk to get my events data:
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)));
};
}
My reducers are:
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;
}
}
This is my store:
const initialState = {
eventsHasErrored: false,
eventsIsLoading: true,
events: [],
calendarView: 0
};
const reduxLogger = createLogger();
const store = createStore(
rootReducer,
initialState,
applyMiddleware(thunk, reduxPromise, reduxLogger)
);
export default store;
How would be best to update my initialState from an api call?

Answer 1

Try:
// 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>
);
}
}
That's because I see that you return already created store and this would explain the error message:
const store = createStore(
rootReducer,
initialState,
applyMiddleware(thunk, reduxPromise, reduxLogger)
);
export default store;