0

我有一个组件可以构建可以选择的搜索/排序过滤器。我希望在 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 状态之前调用渲染，这会引发错误。我可以提防这种情况，但这些都不是“正确的”。那个道具不应该一直在那里吗？有没有我错过的模式？

4

1 回答 1

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
};
于 2016-05-14T10:03:29.123 回答