CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxredux-thunk
Ashik Vetrivelu
Ashik Vetrivelu

Reputation: 1041

React Redux: Component not updated after connecting to redux

The question may seem redundant, but my component does not seem to update after mapStateToProps is called. Below is a piece of code I wrote inside my Home Component ( ofc outside the class declaration).

function mapStateToProps(state) {
  const { tickets } = state;
  console.tron.log(tickets)
  if(!tickets.isLoading) {
    return {
      loading: false,
      ticketsModel: tickets.chunkedData
    }
  }
  return {
    loading: true
  }
}
export default connect(mapStateToProps)(Home);

Everything works fine, but the changes to props is not triggering update in my component.

PS: I checked whether any state mutations takes place, but no it din't. I recreated a new state like 

case RECEIVE_TICKETS :
      return Object.assign({},state,{
        isLoading: false,
        chunkedData: action.data.extractChunkedData(),
        completeData: action.data.getCompleteData(),
      });

A picture demonstrating the last Action Dispatch

EDIT: The Problem has been sorted. Silly me was checking for updates inside componentWillMount instead of componentWillReceiveProps

Upvotes: 3

Views: 400

Answers (1)

Yo Wakita
Yo Wakita

Reputation: 5450

You can write your mapStateToProps more concisely like so:

function mapStateToProps(state) {
  const { isLoading, chunkedData } = state.tickets;
  return {
    loading: isLoading,
    ticketsModel: chunkedData
  };
}
export default connect(mapStateToProps)(Home);

After looking at your mapStateToProps function, and the Redux logger, your problem is most likely in the component itself. If you were to render this.props.loading in your component, you should see true and then false.

Also, I see that you do not have an initial state on your chunkedData array. When you set the initial state of the tickets object, you should set that to an empty array.

So first few lines of your reducer should look like this:

const tickets = (
  state = {
    isLoading: false,
    chunkedData: [],
    // Need more info to know what would go in this object
    completeData: {} 
  },
  action
) => {

See if you can see the props change in the componentWillReceiveProps lifecycle method. You should be able to console.log() the nextProps, that will change whenever the props change.

Read more about lifecycle methods here: http://busypeoples.github.io/post/react-component-lifecycle/

Upvotes: 1

Related Questions