你如何将默认道具传递给存储答案

【问题标题】：How do you pass default props to store你如何将默认道具传递给存储
【发布时间】：2016-05-23 21:13:23
【问题描述】：

那么我怎样才能拥有一个从父级获取一些默认道具的组件，同时也有一个商店？这些似乎有冲突。

<Mycomponent foo="bar">

...这意味着我的组件有一些名为“foo”的状态/道具，其值是我的商店不知道的。这不会破坏图案的可见性设计吗？我是否需要通过其中一种反应生命周期方法将这些初始道具传递到我的商店？这似乎是额外的工作，也很脆弱。

我还发现将商店的状态映射到组件 props 对象有点令人沮丧。例如，我有一个包含一些字段的表单，它们可以从父级获取默认值

<MyForm input1="red", input2="blue">

商店的初始状态可能如下所示

{
  status: valid,
  modified: false,
  form: {
    input1: ""
    input2: ""
  }
}

而我在渲染组件之前的本地 props 是这样的

{
   input1: "red"
   input2: "blue"
}

但是当事情在 mapStateToProps 中重新映射时...

var mapStateToProps = function(state) {
    return state;
}

它最终看起来像这样。

{
  form: {
    input1: "red"
    input2: "blue"
  }
 status: valid,
 modified: false,
 input1: "red"
 input2: "blue"
}

因为“表单”对象之外的 key1 和 key2 属性来自父级传递下来的初始组件属性。它们不是商店状态对象的一部分。我真的希望道具对象与商店相匹配，但除非我开始删除东西，否则它似乎不能。似乎我们以两种方式使用 this.props 对象，感觉不正确。

我真正想要的是父级的属性直接进入我的商店，然后我希望我的组件仅基于我的商店呈现。我觉得 react-redux 不适合 react 生命周期，或者至少我不明白它应该如何使用。

【问题讨论】：

我最终恢复到不使用 react-redux 模块，我觉得它可能比实际更理想化。我相信组件应该能够拥有他们控制的私有状态，作为开发人员可以轻松/快速地操作。为每一个微小的变化创建 reducer 和 action 都是一种负担。此外，没有明确地将 props 与父组件与 store 分开是令人困惑的。

标签： react-redux

【解决方案1】：

结帐文档：https://github.com/reactjs/react-redux/blob/master/docs/api.md - mapStateToProps - 参数：ownProps：

如果将 ownProps 指定为第二个参数，则其值将是传递给您的组件的道具

您在 API 描述下方有示例。这可能会有所帮助。

此外，我认为你做错了什么。 Redux 可以很好地处理组件的内部状态。我使用状态来操作数据，这反映在 GUI 上，但它们与应用程序的其余部分无关（例如：手风琴菜单中的 isVisible 标志）。

只有在从 store 中获取了一些数据时，才应该使用容器（连接到 store 的组件），否则使用哑组件。

组合容器，根据需要嵌套它们，避免在一个容器中检索大量状态。

您还应该获取数据，这对您的组件很重要。如果您的容器必须了解整个状态的所有信息……那么，应用程序的架构似乎有问题。我只将少数几个属性从 state 直接映射到 props：

const mapStateToProps = (state) => {
    return {
       status: state.status,
       field1: state.form.field1,
       field2: state.form.field2
    }
}

所以我最终得到了平面地图。

注意，redux 对新的 props 进行浅比较：

https://github.com/reactjs/react-redux/blob/master/docs/api.md

如果为 true，则实现 shouldComponentUpdate 并浅层比较 mergeProps 的结果，防止不必要的更新，假设组件是“纯”组件并且不依赖于除了其 props 和所选 Redux 存储状态之外的任何输入或状态。默认为真。

不要在简单的应用程序中使用 redux，它适用于更大的项目。

【讨论】：