用于填充状态，然后从该状态构建组件的 Redux 模式？答案

【问题标题】：Redux pattern for populating the state, and then building components from that state?用于填充状态，然后从该状态构建组件的 Redux 模式？
【发布时间】：2016-05-14 08:53:45
【问题描述】：

我有一个组件可以构建可以选择的搜索/排序过滤器。我希望在 redux 中跟踪这些过滤器的选定状态，以便搜索构建器可以订阅并查看它们何时适当地更改和更新。我试图弄清楚如何做的事情（以一种不觉得奇怪的方式）是将过滤器对象填充到状态中。例如，现在在<Search /> 组件中我有类似的内容：

<OptionPicker
  group={'searchFilters'}
  options={{word: 'price', active: true},
  {word: 'distance', active: false},
  {word: 'clowns', active: false}}
/>

那么如何在不触发多个元素渲染的情况下让这些道具进入使用状态。我也在服务器上渲染应用程序，所以对于初始附件渲染，状态已经有了选项。

在我拥有的 OptionPicker 组件中：

class OptionPicker extends Component {
  constructor(props) {
    super(props)
    if (!props.optionstate) {
      this.props.addOptionState(props)
    }
  }

  render() {
    return {this.props.optionstate.word.map((word) => <Option ... />)}
  }
}


function mapStateToProps(state, props) {
  return {
    optionstate: state.optionstate[props.group],
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addOptionState: (props) => {
      dispatch(addOptionState(props));
    },
    optionToggled: (group, word) => {
      dispatch(updateOptionState(group, word));
    }
  };
}

export default connect(mapStateToProps,mapDispatchToProps)(OptionGroup);

这有点工作，但是在填充 redux 状态之前调用 render 的时间存在，这会引发错误。我可以提防这一点，但这些都不是“正确的”。那个道具不应该一直在那里吗？有没有我遗漏的模式？

【问题讨论】：

标签： redux react-redux redux-thunk

【解决方案1】：

我同意你的观点，道具应该永远在那里。我为此使用的模式是设置初始状态并将其传递给 reducer 函数：

export const INITIAL_STATE = {
  optionstate: { /* all filters are present but deactivated */ }
};

export default function (state = INITIAL_STATE, action) {
  // reduce new actions into the state
};

【讨论】：

当然是初始状态！谢谢你让我从杂草中抬起头来。