Question

虽然React与Redux在建模UI状态方面非常出色，但偶尔会出现发生的情况，UI需要以离散的程序方式处理该事件，而且没有意义将这种短暂事件视为一种可以持续任何时间段的状态。

两个例子，来自类似JS Bin的代码编辑器应用程序：

用户将其代码导出到GitHub要点。导出完成后，我们要打开一个显示要点的新浏览器窗口。因此，React组件层次结构需要知道要点的ID，但只能在一个时刻，这时它将打开窗口并完全停止关注gist导出。
用户单击错误消息，这会导致编辑器将发生错误的行置于编辑器中。同样，UI只关注需要在一个时刻关注哪一行，此时（非基于React的）编辑器被告知要关注该行，并且整个事情都被遗忘了。

我提出的最不令人满意的解决方案是：

当触发事件发生时，发送一个动作以使用所需信息更新Redux状态（要点ID，要对焦的行）
对该信息感兴趣的React组件将监视生命周期钩子中的相应道具（componentWillReceiveProps等）。当信息出现在其道具中时，它会采取适当的操作（加载要点窗口，将编辑器集中在线上）
然后该组件立即向Redux商店发送另一个事件，主要是说“我已经处理了这个”。瞬态事件数据将从Redux状态中删除。

这种情况有更好的模式吗？我认为图片的一个基本部分可能是UI对动作的响应总是突破React组件结构 - 打开一个新窗口，在编辑器的API上调用方法等。

Answer 1

您的解决方案肯定会有效，但是您提出的这些问题听起来特别适合用redux处理。只需使用简单的React并将必要的函数传递给组件听起来就更自然了。

例如，对于导出情况，不是调度更新某个状态的操作，然后触发新窗口打开，为什么不打开新窗口代替调度该操作呢？如果您有调度动作触发打开窗口所需的信息，您应该只能在同一个地方打开窗口。

对于单击错误消息触发调用非React，命令式api的示例，从错误消息的最近公共父级和编辑器传递函数。父级还可以维护编辑器周围的包装器的引用。即使它的级别很高，如果你pass down a function to set the ref得到你想要的参考也不是太糟糕。因此，从父级传递给错误消息组件的函数可以简单地调用它维护到编辑器的ref的方法。基本上，这样的事情：

class Parent extends Component {
    constructor(...args) {
        super(...args)

        this.onErrorMessageClick = this.onErrorMessageClick.bind(this)
    }

    onErrorMessageClick(lineNumber) {
        if (this.editor) {
            this.editor.focusOnLine(lineNumber)
        }
    }

    render() {
        return (
            <div>
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 1 } />
                <ErrorMessage onClick={ this.onErrorMessageClick } lineNumber={ 2 } />
                <EditorWrapper editorRef={ (editor) => { this.editor = editor } } />
            </div>
        )
    }
}

const ErrorMessage = ({ onClick, lineNumber }) => (
    <button onClick={ () => onClick(lineNumber) }>
        { `Error Message For ${lineNumber}` }
    </button>
)

// Just adding EditorWrapper because your editor and error messages probably aren't right next to each other
const EditorWrapper = ({ editorRef }) => <Editor ref={ editorRef } />

class Editor extends Component {
    focusOnLine(lineNumber) {
        // Tell editor to focus on the lineNumber
    }

    render() {
        ...
    }
}

Answer 2

我经常将redux-thunk用于这些类型的事件。

基本上，它与设置普通thunk没有什么不同，只是我不会在其中发送动作。

const openGist = (id) => () => {
    // code to open gist for `id`
}

然后我使用这个动作创建者，就像我从触发它的组件中的任何其他人那样，例如映射到mapDispatchToProps并在onClick处理程序中调用。

我被问到的一个常见问题是，为什么我不将这些代码直接放入组件本身，答案很简单 - 可测试性。如果组件没有引起副作用的事件，并且更容易测试导致副作用的代码，那么测试组件要容易得多。

另一个优点是，用户体验设计师往往会在某个时刻介入，并希望对用户提供某种类型的反馈，以便进行这种性质的事件（例如，简要地突出显示错误行），这样就添加了一个此时此活动的X_COMPLETED动作要容易得多。

如何在React / Redux中建模瞬态事件？

2 个答案: