CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
jBoive
jBoive

Reputation: 1299

Redux connected react app - how do I NOT render it until my side effect is complete?

React 16.3 Redux 3.7.2

In componentDidMount I call an action that populates the props (mapDispatchToProps) thru an side effect (AJAX).

My problem is that it reuses the old props from redux - render that first and then re-render once the update has arrived thru mapDispatchToProps.

I don't want to have this child component remember it's state or props - I need it to be a blank slate each time.

The documentation states that the the component is destroyed on unmount but that doesn't seem to be the case since it's a difference in state when you go to this page or you are on the page and reload.

Because when you reload there is no data so the page HAS to wait for the sideeffect to complete.

Unfortunately I can't provide you with a code sample - but anyone that has been exposed to this weird behavior should recognize my description....

Upvotes: 0

Views: 45

Answers (1)

Alex McMillan
Alex McMillan

Reputation: 17962

Your component is likely re-rendering with the "old" state because that's the state you've stored in redux, and are passing to the component.

What you could do is trigger a redux action in componentWillUnmount which destroys that state.

EG (pseudo-pseudocode):

Reducer:

const initialState = { counter: 0 };

const myReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'DO_SOMETHING':
      return {
        ...state,
        counter: state.counter + 1
      };

    case 'CLEAN_STATE':
      return initialState;
  }
}

Component:

class MyComponent extends React.Component {
  render () {
    return (
      <div>
        <span>{this.props.counter}</span>
        <button onClick={triggerActionThatCausesDO_SOMETHING} />
      </div>
    );
  }

  componentWillUnmount () {
    triggerActionThatCausesCLEAN_STATE();
  }
}

Upvotes: 1

Related Questions