【问题标题】:OK to update state in react components directly when using react-redux?使用 react-redux 时可以直接更新反应组件中的状态吗?
【发布时间】:2018-08-11 05:34:26
【问题描述】:

我在网络上看到一些示例,其中人们使用组件本身中的函数调用来处理点击事件之类的事情,然后通过执行以下基本操作直接更改状态:

saveCourse(event) {
  this.setState({saving: true});
}

我曾认为在使用 react-redux 时,根据动作调用在 reducer 中进行所有状态更改非常重要。

如果我错过了 react-redux 的常见使用模式,请告诉我。

【问题讨论】:

    标签: reactjs redux react-redux-form


    【解决方案1】:

    继续使用 React 自己的 State 机制和 Redux 存储是完全可以的。

    以下是我对这两种选择的理解:如果一条数据(以及发生在其上的更改)对于单个组件及其直接子组件而言是本地的,则使用 State。以您通常使用 React 的方式更新它。

    如果要在您的应用程序中使用一条数据,在可能驻留在或可能不在同一组件树中的各种组件中使用一条数据,或者可能被各种中间组件相互分离,那么请使用 Redux,这样您就不必'最终不会向上和向下传递道具和处理程序回调。

    这里有一个例子来说明这一点:假设您的 Redux 商店中有一个 联系人 列表。还有一个addContact reducer 可以将新联系人添加到此列表中。此列表中的项目可能会在您的应用程序中以各种形状和位置显示。例如,侧栏上的菜单项可能会显示列表中的项目数,而主面板中的另一个 div 可能会列出项目及其详细信息。到目前为止一切顺利。

    现在,您需要创建一个NewContact 组件来呈现表单和必要的输入字段,以便用户将新联系人添加到列表中。此表单上的输入可以是Controlled Components,更新 NewContact 组件的内部状态,完全绕过 Redux 存储。提交表单后,您的组件将使用适当的有效负载发送 addNewContact 操作,此时新联系人将通过 Redux 机制添加到列表中,将必要的更新传播到应用程序的其余部分。

    这是同时混合使用 Redux Store 和 React State 的一个有效示例。

    现在,您是否也可以在 Redux 中管理 NewContact 表单的状态? Absolutely!但是你应该吗?您的来电。您不必这样做,除非这样做有一些好处。

    【讨论】:

      【解决方案2】:

      在 redux 中管理状态并不意味着你不能在 react 中使用有状态的组件,你主要使用 setState 来重新渲染组件并接收新的 props。虽然我使用this.forceUpdate 重新渲染。但是设置状态似乎更好

      【讨论】:

        【解决方案3】:

        setState 正在更改本地组件的状态,如果您更改的范围仅针对您的组件而不是整个应用程序,那么更改本地状态没有任何问题。例如。显示/隐藏模式,或更改某种在重新加载页面时不会持续存在的 UI 元素,例如打开/关闭下拉菜单。

        【讨论】:

          猜你喜欢
          • 2022-01-03
          • 2020-04-11
          • 1970-01-01
          • 2019-06-13
          • 1970-01-01
          • 1970-01-01
          • 2017-10-08
          • 2021-08-11
          • 2016-10-02
          相关资源
          最近更新 更多