CODEWITHSUNDEEP
reactjsreduxreact-redux
HVenom
HVenom

Reputation: 762

Render not being called after state gets updated

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.

Upvotes: 1

Views: 66

Answers (1)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

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

Upvotes: 0

Related Questions