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

Question

我有一个组件可以构建 search/sort 可以选择的过滤器。我希望在 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，这会引发错误。我可以防止这种情况发生，但是 none 感觉 "right"。那个道具不应该一直在那里吗？是否有我缺少的模式？

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 模式？

Redux pattern for populating the state, and then building components from that state?

redux

react-redux

redux-thunk