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

我有一个组件可以构建可以选择的搜索/排序过滤器。我希望在redux中跟踪这些筛选器的选定状态，以便搜索生成器可以订阅并查看它们何时进行适当更改和更新。我试图弄清楚如何做的事情（以一种不觉得奇怪的方式）将过滤器对象填充到状态中。例如，在<Search />组件现在我有这样的：Redux模式用于填充状态，然后从该状态构建组件？

<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状态已经被填充之前被调用，它抛出一个错误。我可以防范，但没有一个感觉“正确”。那个道具不应该永远在那里吗？有没有这种我失踪的模式？

来源

2016-05-14 bigethan

我同意你的观点，道具应该永远在那里。我使用的模式是设置初始状态并将其传递给减速器功能：

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-14 10:03:29 Nicole

当然，初始状态！感谢让我从杂草中寻找。 – bigethan

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

回答

相关问题