Render not being called after state gets updated - reactjs

Question

I have created a basic reducer the state do get updated but render method does not get called here is the reducer file.
reducer.js
const accountSelector = (
store = {
items: [],
selectAll: false,
searchList: [],
filterList: [],
labelCount: 0
},
action
) => {
let newStore = {};
switch (action.type) {
case 'INITIALIZE_LIST':
console.log('in INITIALIZE_LIST');
newStore = { ...store, items: action.payload };
break;
case 'SEARCH_LIST':
newStore = { ...store, searchList: action.payload };
break;
case 'FILTER_LIST':
newStore = { ...store, filterList: action.payload };
break;
case 'SELECT_ALL_ACCOUNTS':
newStore = { ...store, selectAll: !store.list.selectAll };
break;
case 'UPDATE_LABEL_COUNT':
newStore = { ...store, labelCount: action.payload };
break;
default:
newStore = { ...store };
break;
}
console.log(' newStore: ', newStore);
return newStore;
};
export default accountSelector;
The state does get updated as I already logged it.
As you can see there are no mutation in reducer and still the render method does not get called.
Here are mapStateToProps and mapDispatchToProps
const mapStateToProps = state => ({
accountSelector: state.accountSelector
});
const mapDispatchToProps = dispatch => ({
initializeAccountsList: list => {
console.log('~~~~ ac selector ~~~~~~ in initializeAccountsList method');
dispatch({
type: 'INITIALIZE_LIST',
payload: list
});
}
Updated The question with store.js file where I combine reducer:
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import group from './reducer/groupReducer';
import clients from './reducer/clientReducer';
import accounts from './reducer/accountReducer';
import accountSelector from './reducer/accountSelectorReducer';
import createfeed from './reducer/createfeed';
const middleware = applyMiddleware(thunk, promise());
const reducers = combineReducers({
createfeed,
group,
clients,
accounts,
accountSelector
});
export default createStore(reducers, {}, middleware);
UPDATE: code for render method that has component that uses one of the state properties of accountSelector
render() {
let list = this.props.accountSelector.items;
if (this.props.accountSelector.searchList.length > 0) {
list = this.props.accountSelector.searchList;
}
return (
<div className="accountv2-select">
<UserList
updateLabelCount={this.updateLabelCount}
list={list}
selectedAccounts={this.props.selectedAccounts}
selectAll={this.props.selectAll}
selectedLoginIds={this.props.selectedLoginIds}
/>
);
}
Ofcourse the list will get the default value of items i.e is an empty array already defined in the reducer since the render method is not called even though state gets updated within reducer.

Answer 1

Removed old answer, as it's irrelevant now
It looks like your store.js file is combining reducers correctly, your mapStateToProps and mapDispatchToProps functions look fine, and your accountSelector reducer file looks fine, so at this point the only thing left is actually using your redux store data (from mapStateToProps) in your component.
You should be accessing state date (like items, searchList, filterList, ect.) like this:
// you mapped your entire accountSelector state to this.props.accountSelector
this.props.accountSelector.items
this.props.accountSelector.searchList
this.props.accountSelector.filterList
// ... etc