我们正在创建一个大型前端应用程序。
我们正在使用 React-Redux
我们正在创建一些可重用的组件。
这个问题是关于在同一页面/路由上有多个相同可重用 redux react 组件的实例
我们有一个Sectionheader组件。这绑定到 redux 状态。
它侦听标题属性 reducer SectionheaderReducer。
由于我们Sectionheader在页面上有 2 个这样的实例，它们都倾向于显示相同的值，因为它们绑定到相同的商店状态属性。
如何使基于 redux 的可重用 React 组件可配置？以便每个实例可以具有不同的减速器标头属性值SectionheaderReducer
您需要实现某种命名空间实例的方法。这可以像传递一个键来区分组件和减速器一样基本。
您可以ownProps在mapStateToProps函数中使用 来引导映射到命名空间
const mapStateToProps = (state, ownProps) {
let myState = state[ownProps.namespace]
return {
myState.value
}
}
可以使用相同的方法将命名空间传递给 mapDispatchToProps
const mapDispatchToProps = (dispatch, ownProps) {
return {
myAction: (myParam) => dispatch(myAction(ownProps.namespace, myParam))
}
}
只要记住在动作类型中使用命名空间，这样减速器就不会踩到脚趾
const myAction => (namespace, myParam) {
return { type: `${namespace}/${MY_TYPE_CONSTANT}`, myParam }
}
并确保减速器也有命名空间
const myReducer = (namespace) => (state = initialState, action) => {
switch(action.type) {
case `${namespace}/${MY_TYPE_CONSTANT}`:
return { ...state, action.myParam }
default:
return state
{
}
现在在组合减速器时添加 2 个命名空间减速器
combineReducers({
myInstance1 : myReducer('myInstance1')
myInstance2 : myReducer('myInstance2')
}
最后将命名空间传递给每个实例
render() {
return (
<div>
<MyComponent namespace='myInstance1' />
<MyComponent namespace='myInstance2' />
</div>
)
}
免责声明：我是以下库的主要贡献者。
redux-subspace可以提供更高级的命名空间实现，而无需为每个想要拥有多个实例的组件重新实现此模式。
创建减速器与上面类似
const reducer = combineReducers({
myInstance1: namespaced('myInstance1')(myReducer)
myInstance2: namespaced('myInstance2')(myReducer)
})
然后SubspaceProvider可以用来切换每个组件的状态
render() {
return (
<div>
<SubspaceProvider mapState={state => state.myInstance1} namespace='myInstance1'>
<MyComponent />
</SubspaceProvider>
<SubspaceProvider mapState={state => state.myInstance2} namespace='myInstance2'>
<MyComponent />
</SubspaceProvider>
</div>
)
}
只需确保您还将mapStateToProps函数更改为从提供程序中映射的子树开始遍历
const mapStateToProps = (state) {
return {
state.value
}
}
如果您希望减少嵌套，还有一个高阶组件。
我以不同的方式实现了它，实际上没有使用命名空间更改操作名称。
相反，我添加了 infra 函数，它将拦截动作创建者并添加meta-data到每个动作中。（以下FSA）这样你就不需要改变你的减速器或mapStateToProps功能。
它也与redux-thunk.
应该很容易使用... reducer-action-interceptor
我将这个问题解释为：
<SectionHeader />）一种可能的解决方案是让您将“部分”的想法添加到您的商店。您将创建管理数据内容结构的 reducer。EG store 状态，可能看起来像这样：
{
sections: {
0: {
header: 'My section title',
content: 'Whatever your content is'
},
1: {
header: 'My other section title',
content: 'Loads of lovely writing or hrefs to images or whatever'
}
}
}
``
然后，您将拥有一个“容器组件”或“布局组件”或“智能组件”（它们有很多名称），它们“知道”您要在特定页面上使用第 2 部分和第 4 部分。它如何知道这一点，取决于您。也许你对索引进行了硬编码（因为它总是相同的），也许你有一个过滤规则，也许你在商店中有另一个定义选择的字段......等等。
然后容器组件会将选择的标题传递给 "dumb" ，可能是这样的：
<SectionHeader>{sections[2].header}</SectionHeader>
或者
<SectionHeader title={sections[2].header} />
将我们的组件转换为哑（无状态）组件，以便这些组件可以轻松重用而不会出现任何复杂情况。