0
私は選択可能な検索/並べ替えフィルターを構築するコンポーネントを持っています。これらのフィルタの選択された状態をreduxで追跡して、検索ビルダーが登録して、変更と更新のタイミングを適切に表示できるようにします。私が奇妙に感じることのないようにする方法を理解しようとしていることは、フィルターオブジェクトを状態に移入することです。 状態を移入し、その状態からコンポーネントを構築するためのReduxパターン?
<OptionPicker
group={'searchFilters'}
options={{word: 'price', active: true},
{word: 'distance', active: false},
{word: 'clowns', active: false}}
/>
だから状態にそれらの小道具を取得する方法をレンダリングする複数の要素をトリガすることなく使用される:例えば、今
<Search />
コンポーネントで私のようなものを持っています。私はまた、サーバー上のアプリケーションもレンダリングしているので、最初の添付ファイルレンダリングのために、状態にはすでにオプションがあります。私が持っている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の状態はエラーがスローされ、移植された前にレンダリングが呼び出される時間が存在します。私はそれを防ぐことができますが、どれも「正しい」と感じることはありません。その小道具はいつもそこにあるべきではない?私が行方不明のパターンがありますか?
もちろん初期状態です!私に雑草を見ていただきありがとうございます。 – bigethan