Redux state is updated but not the component

Question

I am facing problem in updating/re-rendering component after store and state updation.

1- On page load a store is created with empty initial state so all components are rendered with empty

 store = createStore(Reducers, {}, compose(applyMiddleware(...middleware, thunk), extension)); 

2- Then data from API is taken and action is dispatched with that data.

 axios.get(url).then(res => {
  store.dispatch(getFromServer(res.data));
 })

3- state is an object here and keys of objects are reducers and components and reducers are combined through combineReducers .so when getFromServer action is dispatched it is listened in all reducers.and updates state object in respective reducer.Example reducer is as follows.

  import update from 'immutability-helper';
  import * as types from '../actions/constants';
  const initialState = {};
  export default (state = initialState, action) => {
     switch (action.type) {
       case types.GET_FROM_SERVER:
        return update(state,{
            $set:action.schema.database
        })
    case types.SAVE_NAME:
        return { name: action.name };
    default:
        return state;
  }
 };

Now i can see that at first my component has empty state and then state is updated correctly.component code is as follows:

 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import Table from '../containers/Table';
 @observer class Tables extends Component {'
   props: Props
   constructor(props) {
    super(props);
    this.state = { tables : { }  }
}
componentWillMount(){
    this.setState({
        tables : this.props.tables
    })
}
componentWillReceiveProps(nextProps){
    this.setState({
        tables : this.props.tables
    })
}   

render() {
    var {tables} = this.props;
    console.log(tables);
    return (
        <div className='table-wrapper'>
            { tables.map((table) => (
                <div key={ table.id }>{
                <Table
                    key={ table.id }
                    data={ table }                        
                />)</div>
            ))}                
        </div>
    );
}
}

type Props = {
  tables: Array<TableType>    
};

export default Tables;

i can see state change in browser console here.

prev state and next state is showing the state updation.

Also render method showing that this.props.data is updating.but still view is not updated here.

Am i doing wrong while state updation as mentioned Here ?

Answer 1

You are using the componentWillReceiveProps lifecycle hook for catching the moment of updating the component from props:

componentWillReceiveProps(nextProps){
    this.setState({
        tables : this.props.tables
    })
}   

But, I'm pretty sure that you wanted to update the state with new props

componentWillReceiveProps(nextProps){
  this.setState({
     tables : nextProps.tables
  })
} 

Answer 2

You extract tables from this.props , extract it from this.state so it will update at each render.

render() {
  const {tables} = this.state;

Another thing, you map() tables, so I assume it's an Array. So you should initialize it with an array instead of an object:

From:

this.state = { tables : { }  }

To:

this.state = { tables : [ ]  }