reactjs - React-Redux 连接 : Use mapStatetoProps to inject only component part of store

Question

[React-Redux] 问题。

我希望在任何应用程序或应用程序商店的任何级别中使用可重用的封装组件。

当使用“mapStatetoProps”然后制作组件容器(将状态作为 Prop 注入(inject)到组件中)时，您总是会收到整个存储。如果您想动态地或在其他项目中重用组件，这可能会很痛苦。

问题是，如果您使用相同的存储条目，但您想使用相同的组件作为封装模块，它们将共享相同的数据。

而且，当您封装组件并重用它们并且它们深深嵌套在存储中时，您最终将需要知道它们在哪里。

一个可能的丑陋解决方案是实现一个脚本，遍历 mapStateToProps 内的状态，直到找到与特定名称匹配的键。这里的问题是确保您要使用的状态字段是唯一的。

我会非常高兴知道以优雅的方式解决此问题的任何正确解决方案。

或者也许我们在谈论react-redux-sagas应用程序时思考的方式是错误的。

Answer 1

为了举例，我将讨论一个可重用的编辑器组件，它编辑文档并将它们提交到服务器。

在使用编辑器的代码中，我为每个编辑器提供了一个唯一的 ID。例如

const Comment = (props) => {
  return <div>
    <h3>Add new comment</h3>
    <Editor editorId={`new-comment-${props.commentId}`} />
  </div>
}

在 redux 状态下，我有一个 subreducer 编辑器，其对象由 editorId 键入，因此 redux 状态类似于:

{
  otherStuff: {...},
  editor: {
    "new-comment-123": { isActive: true, text: "Hello there" },
    "new-comment-456": { isActive: false, text: "" },
    ...
  },
  ...
}

然后在编辑器 mapStateToProps 中，我使用选择器来获取正确实例的数据:

const mapStateToProps = (state, ownProps) => {
  return {
    isActive: selectors.isActive(state, ownProps.editorId),
    text: selectors.text(state, ownProps.editorId)
  }
}

选择器以 reselect 风格构建，可以手动或实际使用重新选择。示例:

// Manual code
export const getEditor = (state, editorId) => state.editor[editorId] || {};
export const isActive = (state, editorId) => getEditor(state, editorId).
export const text = (state, editorId) => getEditor(state, editorId).text;

// Same in reselect
import { createSelector } from 'reselect'

export const getEditor = (state, editorId) => state.editor[editorId] || {};
export const isActive = createSelector([getEditor], (editorData) => editorData.isActive);
export const text = createSelector([getEditor], (editorData) => editorData.text);

如果您想扩展它以在多个应用程序中使用，您需要导出您的组件、reducer 和 sagas。有关工作示例，请查看 https://github.com/woltapp/redux-autoloader 甚至 http://redux-form.com