Reactjs 如果从道具传递，则处理useReducer

我试图在特定用例的组件中使用

useReducer

以下是我的overfly简化工作状态：

函数defaultToggleReducer（状态、操作）{
log（'使用了默认的切换程序'）
返回！状态
}
功能CustomToggleReducer（状态、操作）{
console.log（'customtoggler used'）
返回！状态
}
//虚拟包装以记录从'Togler'组件到指向两次初始化的初始化
函数切换初始值设定项（状态）{
console.log（'toggleInitializer'）
返回状态
}
功能切换器（道具）{
常数[
切换状态，
切换调度，
]=React.useReducer（defaultToggleReducer、false、toggleInitializer）
//这是prt使以前的“useReducer”无效的原因
const state=props.toggleState！==未定义？props.toggleState:toggleState
const dispatch=props.toggleDispatch | | toggleDispatch
返回(
分派（{type:'add'}）}>
{Boolean（state）.toString（）}
)
}
函数应用程序（）{
const[customToggleState，customToggleDispatch]=React.useReducer(
自定义切换还原程序，
假的
)
返回(
违约
定制的
customToggleDispatch（{type:'parentAction'}）}>
这就是为什么我要派遣
)
}
ReactDOM.render（，document.getElementById（'root'））

---

使用组件的组合来解决此问题。将

Toggler

分解为两个组件-dumb

Toggler

需要外部减速器，以及呈现

Toggler

并提供减速器的

DefaultToggler

如果需要标准切换器，请使用

DefaultToggler

，如果需要自定义版本，请使用dumb

toggler

，并提供自定义减速器

函数defaultToggleReducer（状态、操作）{
log（'使用了默认的切换程序'）
返回！状态
}
功能CustomToggleReducer（状态、操作）{
console.log（'customtoggler used'）
返回！状态
}
//虚拟包装以记录从'Togler'组件到指向两次初始化的初始化
函数切换初始值设定项（状态）{
console.log（'toggleInitializer'）
返回状态
}
函数切换器（{toggleState:state，toggleDispatch:dispatch}）{
返回(
分派（{type:'add'}）}>
{Boolean（state）.toString（）}
)
}
函数DefaultToggler（）{
常数[
切换状态，
切换调度，
]=React.useReducer（defaultToggleReducer、false、toggleInitializer）
返回(
);
};
函数应用程序（）{
const[customToggleState，customToggleDispatch]=React.useReducer(
自定义切换还原程序，
假的
)
返回(
违约
定制的
customToggleDispatch（{type:'parentAction'}）}>
这就是为什么我要派遣
)
}
ReactDOM.render（，document.getElementById（'root'））

哦，是的，这很有道理！我在考虑在复杂的环境下包装，然后使用消费者布拉布拉。。。但这样更简单。谢谢不客气。如果将某些功能作为组件的一部分，则会使使用复杂化，将功能提取到另一个组件或自定义挂钩，然后使用组合。上下文通常是一种很好的依赖注入，避免向下钻取，这里不是这样。是的，这就是为什么我没有用这种方式进行过太多的研究。注意：构图是（而且仍然是）在关键字中，我对这样的东西很确定，这正是我想要的：）仅供参考：我的最终作品包括一个带有各种组件的

ToggleBuilder

（当然它不是一个切换组件，而是一个具有设计疯狂功能的手风琴），再次感谢！