Question

我有一个构建可以选择的搜索/排序过滤器的组件。我希望在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，这会引发错误。我可以防范这一点，但没有一个感觉＆＃34;正确＆＃34;。那个道具不应该永远存在吗？有没有我失踪的模式？

Answer 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
};

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

1 个答案: