redux - reducer state is blank
The short answer is that you're not passing the initial state quite right. The first argument to the connect
function for the React Redux bindings is mapStateToProps
. The point of this function is to take the state that already exists in your app and map it to props for your component. What you're doing in your starterInfo
function is kind of just hard-coding what the state is for your component. Because you're returning a plain object React doesn't really know the difference so it works just fine, but Redux doesn't yet know about your app state.
Instead, what you should do is provide your initial state directly to the reducers, like this:
const intialStyleItemsState = [
{
pk: 31,
order: 1,
label: 'Caption text color',
css_identifier: '.caption-text',
css_attribute: 'color',
css_value: '#FFFFFF'
},
{
pk:23,
order: 2,
label: 'Caption link color',
css_identifier: '.caption-link',
css_attribute: 'color',
css_value: '#FEFEFE'
}
];
function styleItems(state = intialStyleItemsState, action){ ...
And eventually, because you're splitting your reducers up you'll need to combine them back together again with Redux's combineReducers
utility, provide that root reducer to your store and go from there.