CODEWITHSUNDEEP
javascriptreactjsredux
user17791008
user17791008

Reputation: 297

How does redux decide when to update the UI?

By design when the state updates the UI should update.

However. If I return a brand new object, it will not update the UI.

  case 'clearArticleForm':
    let newState1 = {};
    return newState1;
  }

If I return a brand new object and populate it as follows I still can not get the UI to update.

const initial_state = {link:{}, image:{}, title:{}, summary:{}, tag:{}, domain:{}, valid: false};


  case 'clearArticleForm':
    let newState1 = initial_state;
    return newState1;
  }

However if I populate it this way, I will finally get the UI to update.

const initial_state = {link:{value:''}, image:{value:''}, title:{value:''}, summary:{value:''}, tag:{value:''}, domain:{value:''}, valid: false};

  case 'clearArticleForm':
    let newState1 = initial_state;
    return newState1;
  }

I though that by definition / design when the state changes the UI should update. What is going on here.

The state changes as I verified in the functional component however the UI does not until the 3rd example.

I have described the behavior for this case however I am looking for a rule and documentation so I understand the general case: induction.

Functional Component:

const data = useSelector((state) => state.ArticleForm) || {};

// ... snip

<M10 valid = {data.link.valid}     value = {data.link.value}    onChange={onChange} className = 'modal_article_input' placeholder="link"    name="link" />

Upvotes: 2

Views: 75

Answers (2)

favor
favor

Reputation: 395

Although the state is updating, that state must actually be used in your returned JSX

For example, if you are watching a part of the state tree in your functional component but do not use that part of the tree in your component, that UI will not update.

Upvotes: 1

Deniz Karadağ
Deniz Karadağ

Reputation: 761

In your middle code snippet your state has keys and their values are empty objects.

const initial_state = {link:{}, image:{}, title:{}, summary:{}, tag:{}, domain:{}, valid: false};

but in the last one these objects has keys and values.

const initial_state = {link:{value:''}, image:{value:''}, title:{value:''}, summary:{value:''}, tag:{value:''}, domain:{value:''}, valid: false};

can this be the reason for not updating the render?

Upvotes: 0

Related Questions