尽管有异步计算，Redux 的最小状态？

Posted 2023-02-19

【中文标题】尽管有异步计算，Redux 的最小状态？

【英文标题】：Redux minimal state despite asynchronous calculations?

【发布时间】：2017-07-05 22:39:52

【问题描述】：

在我的状态树中，我有来自状态 A 的数据 B。

B 可以是图片、3d 几何图形、音乐曲目等，它单独根据状态树中的参数A 计算出来。 但关键是B是从A异步计算出来的。

B 会随着A 的变化而变化。 B 可能是也可能不是可序列化的。

建议将 redux 状态保持最小，我试图使用选择器来实现这一点并从状态中删除 B。但是，由于B 是异步计算的，因此我似乎不能使用选择器或像reselect 这样的记忆选择器。有什么解决方案可以让状态保持最小并且不包含B？

【问题讨论】：

您需要存储B 吗？管理A 的组件长什么样？

想象 A 只是几个参数，例如数字。该组件可以是滑块、复选框，以及任何适合表示A。

【参考方案1】：

你的 redux 商店有多少个 reducer？您是否使用 combinereducers() 来管理多个减速器？如果是这样，A 和 B 都可以是具有自己初始状态的独立 reducer，并且可以从您的 React 组件拥有自己的本地状态，并从相应的生命周期事件方法调度异步 action-creator 以更新道具

如果您从 A 向下传递给 B 的那些 props 仅从其父组件派生，则不需要存储在 reducer 的初始状态中，您可以使用 propTypes & defaultProps。它允许您为组件分配 props 类型的 props 名称，而无需将它们放入 reducer。

例如这里是 react bootstrap 的源代码 您将看到需要如何将设置默认道具传递给其组件。当组件有自己的 proptype 和 defaultprop 设置时，你不需要从 redux store 传递这些 props。您可以从组件 A 动态生成 prop 值并将它们传递给 B。

import classNames from 'classnames';
import React from 'react';
import elementType from 'react-prop-types/lib/elementType';

import  bsClass, prefix, splitBsProps  from './utils/bootstrapUtils';

const propTypes = 
  /**
   * Turn any fixed-width grid layout into a full-width layout by this property.
   *
   * Adds `container-fluid` class.
   */
  fluid: React.PropTypes.bool,
  /**
   * You can use a custom element for this component
   */
  componentClass: elementType,
;

const defaultProps = 
  componentClass: 'div',
  fluid: false,
;

class Grid extends React.Component 
  render() 
    const  fluid, componentClass: Component, className, ...props  =
      this.props;
    const [bsProps, elementProps] = splitBsProps(props);

    const classes = prefix(bsProps, fluid && 'fluid');

    return (
      <Component
        ...elementProps
        className=classNames(className, classes)
      />
    );
  


Grid.propTypes = propTypes;
Grid.defaultProps = defaultProps;

export default bsClass('container', Grid);

【讨论】：

当然，A 和 B 在 redux 状态下的情况很简单。在这种情况下甚至不需要组件本地状态，redux 可以处理这一切。但是，我询问是否要从状态中删除 B，因为它是一个纯粹派生​​自 A 的对象。

@bebbi 我编辑了关于道具类型的答案。对你有帮助吗？

不@Milo，这没有帮助。 propTypes 与问题无关，用于道具验证。我会推荐一个好的 react-redux 介绍，比如 Dan Abramovs “React Applications with Idiomatic Redux” on egghead。

@bebbi 很遗憾听到这个消息。但是 proptype 也可以在您没有从父组件传递该特定道具或您也不想从 redux 存储中获取该道具的情况下工作。如果您查看 react bootstrap 源代码，这些组件使用 proptype 在其内部设置自己的 props，因此即使您没有将某些 props 传递给 bootstrap 组件，该组件仍然具有使用 proptype 创建的默认 props。 github.com/react-bootstrap/react-bootstrap/blob/master/src/…