redux 如何决定何时更新 UI？

Question

根据设计，当状态更新时 UI 应该更新。

不过。如果我return一个全新的对象，它不会更新UI。

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

如果我 return 一个全新的对象并按如下方式填充它，我仍然无法让 UI 更新。

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


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

但是，如果我以这种方式填充它，我最终会得到 UI 进行更新。

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;
  }

虽然根据定义/设计，当状态更改时 UI 应该更新。这是怎么回事。

当我在功能组件中验证时，状态发生变化，但是 UI 直到第三个示例才发生变化。

我已经描述了这种情况下的行为，但是我正在寻找规则和文档，以便理解一般情况：归纳法。

功能组件：

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" />

Answer 1

在你中间的代码片段中，你的状态有键，它们的值是空对象。

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

但在最后一个中，这些对象具有键和值。

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

这可能是不更新渲染的原因吗？

Answer 2

尽管状态正在更新，但该状态必须实际用于您返回的 JSX

例如，如果您正在监视功能组件中状态树的一部分，但未在组件中使用状态树的那部分，则 UI 将不会更新。

redux 如何决定何时更新 UI？

How does redux decide when to update the UI?

javascript

reactjs

redux