Redux 中的多态和动作冒泡
介绍
Redux 通过操作和Reducer管理 React 应用的复杂状态，从而为 React 应用提供了强大的功能。它基于函数式编程方法，其中 Reducer 是简单的函数，可在调度操作时更新 Redux存储中的状态。但是，可以使用 Redux 全局存储使 Reducer 具有多态性并模仿操作冒泡。由于这些概念并非 Redux 的原创，而是基于面向对象编程的改编，因此它们可能不像在其他语言或框架中那样必要。本指南将解释如何在 Redux 中实现多态性和操作冒泡。
Redux 中的多态性
多态性是一种允许您使用单一形式执行多项操作的技术。它是面向对象编程的一项功能，通过它您可以实现函数重载，其中可以使用单个函数根据传递的参数实现不同的功能。所有函数都具有相同的名称，但执行不同的任务。Redux 中的 Reducer 也是函数，您可以在其中将操作和状态作为参数，并根据操作执行不同的任务。
考虑 React-Redux 应用程序中的一个简单 Reducer，它根据传递给它的操作添加、删除或更新 Todo。
export default function todoReducer(state=initState,action){
switch(action.type){
case 'ADD_TODO': return {
...state,
todos: [...todos,action.payload.newTodo]
}
case 'UPDATE_TODO': return {
...state,
todos: todos.map((todo)=>{
if(todo.id===action.payload.updatedTodo.id)
return action.payload.updatedTodo;
else
return todo;
})
}
case 'DELETE_TODO': return {
...state,
todos: todos.filter(todo=>todo.id!==action.payload.de)
}
default: return state
}
}
您有一个简单的todoReducer，它可以将新的待办事项添加到您的状态中的待办事项列表中，更新特定的待办事项，或从您的状态中删除特定的待办事项。这是 React-Redux 应用中常见的 Reducer 实现。如果您在任何时候想要添加新的待办事项，您可以分派一个类似于这样的操作。
dispatch({
type: 'ADD_TODO',
payload:{
newTodo:{
id: 3,
name: 'Make a new todo list',
status: 'Pending'
}
}
})
类似地，要更新上述待办事项，请发送如下操作。
dispatch({
type: 'UPDATE_TODO',
payload:{
newTodo:{
id: 3,
name: 'Make a new todo list',
status: 'Completed'
}
}
})
因此，在一般的 Reducer 中，操作看起来像{type: 'DELETE_TODO', payload: {...}}。使用多态性可以使这变得更简单、更灵活。您不必在 Reducer 中的每个操作类型上都使用switch case，而是可以创建一个多态 Reducer，它只需调用操作上的处理程序属性并将状态和有效负载属性传递给它。因此，上述 Reducer 变为：
export default function todoReducer(state = initState, action) {
return action.handler(state, action.payload);
}
你的行为看起来就像
{
handler: ADD_TODO,
payload: newTodo:{...}
}
然后，您可以创建一个函数，该函数根据处理程序执行所需的计算，并返回您的 Reducer 返回的结果。这使您的 Reducer 具有多态性，因为它返回一个实例，该实例根据附加到它的处理程序属性执行不同的操作。您可以通过在处理程序属性内附加操作类型来对任何类型的操作遵循相同的模式。
Redux 中的动作冒泡
操作从组件发出，以触发修改或更新状态的 Reducer。就像JavaScript 中事件从子元素冒泡到父元素一样，当子组件触发操作来修改状态时，操作冒泡可以找到一个用例，您需要对父组件执行相同操作才能使用该修改后的状态。但是，当您分解此用例时，似乎相关信息才是真正需要以自下而上的方式冒泡通过组件树的内容，而不是操作本身。请考虑 React-Redux 应用程序中的以下组件子树。
export const ParentComponent =()=>{
return(
<ChildComponent/>
)
}
组件树由两个组件组成，一个ParentComponent和一个在ParentComponent内部渲染的ChildComponent。如果ChildComponent在分派操作时可以修改状态，则ParentComponent可以直接从 Redux 存储中使用修改后的状态。需要注意的是，这里提到的状态不是传递给子组件的props。分派操作以修改全局存储中的状态，本质上是通过树冒泡信息，自上而下、自下而上等等。因此，您可以通过通过操作冒泡信息并更新全局存储来实现操作冒泡，其中修改后的状态可由组件树中的任何组件使用。
结论
值得注意的是，Redux 减速器中已经实现了多态性，因为单个减速器旨在根据传递的操作执行不同的任务。此处演示的创建多态减速器的示例可能不会为具有简单操作的小型应用程序带来更好的方法，有时可能根本没有必要。同样，由于操作冒泡不是 Redux 的原生功能，因此使用全局存储来模仿该概念比从头开始实现要好得多。理想的实现可能直接远离 Redux 自己的内置方法，该方法使您能够编写功能强大、干净且结构化的代码。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~