Render not being called after state gets updated

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.

How is state getting updated? Some interaction with the <UserList... /> component? Also it looks like your list variable should get updated when initializeAccountsList is dispatched - where is this action dispatched? — Blundering Philosopher

Blundering Philosopher Blundering Philosopher · Accepted Answer · 2018-06-27T07:42:22

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

Render not being called after state gets updated

1 Answers