状態を移入し、その状態からコンポーネントを構築するためのReduxパターン？

Question

私は選択可能な検索/並べ替えフィルターを構築するコンポーネントを持っています。これらのフィルタの選択された状態を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の状態はエラーがスローされ、移植された前にレンダリングが呼び出される時間が存在します。私はそれを防ぐことができますが、どれも「正しい」と感じることはありません。その小道具はいつもそこにあるべきではない？私が行方不明のパターンがありますか？

Answer 1

私は小道具が常にそこにあるべきであることに同意します。私が使用するパターンは、初期状態を設定し、それをレデューサー関数に渡すことです：

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

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