[QUESTION] ¯\_(ツ)_/¯

[cjpatoilo]

Why not:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/configureStore';
import ItemList from './components/ItemList';

render(
    <Provider store={store}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
)

or

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import ItemList from './components/ItemList';

render(
    <Provider store={configureStore}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
)

Anyway, great tuts! Thanks

[stowball]

configureStore is a function, so it needs to be called first. This would work:

render(
    <Provider store={configureStore()}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
);

I think the reason to have a separate var is so it's cleaner to do all your server-side state configuration and store setup outside, and then always just pass the store={store} regardless of the project you're working on

[THEozmic]

About the configureStore: You seem to be calling dispatch out of the blues, I thought dispatch was the return value of configureStore, but I don't see you assigning it anywhere. Maybe I am way off with my assumption, please clarify.

[stowball]

I'm not sure what you mean. dispatch is part of thunk that needs to be used to call actions from within a thunk https://github.com/gaearon/redux-thunk#motivation

[THEozmic]

Thanks for your reply. I understand what it is now. I have recently (after reading your tuts) been using dispatch without really knowing where is came from, it feels better to know where it's from.

[cjpatoilo]

Thanks @stowball <3