栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

React / redux,显示多个组件,共享相同的动作,但状态不同

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

React / redux,显示多个组件,共享相同的动作,但状态不同

只需将您的主要状态划分为所需的多个向导状态,并随每个操作一起发送一个向导ID,以便您的reducer知道要解决的状态。

作为数组

{  wizards: [    { id: 'A', state: true },    { id: 'B', state: false },    { id: 'C', state: true }  ]}

您可以编写一个向导精简器,该精简器了解如何精简单个向导状态。

function wizardReducer(wizard, action) {  switch(action) {    case 'TOGGLE':      return {        id: wizard.id,        state: !wizard.state      };    default:      return wizard;  }}

然后编写一个

wizardsReducer
,了解如何减少向导列表。

function wizardsReducer(wizards, action) {  return wizards.map(function(wizard) {    if(action.id == wizard.id) {      return wizardReducer(wizard, action);    } else {      return wizard;    }  });}

最后,使用

combineReducers
来创建根简化程序,该
wizards
属性将对此属性的责任委派给this
wizardsReducer

combineReducers({  wizards: wizardsReducer});

作为对象

如果要将向导存储在一个对象中,则必须以

wizardsReducer
稍微不同的方式构造。

{  wizards: {    A: { id: 'A', state: true },    B: { id: 'B', state: false },    C: { id: 'C', state: true }  }}

映射状态并没有多大意义,当我们可以直接选择需要的状态时。

function wizardsReducer(wizards, action) {  if(!(action.id in wizards)) return wizards;  const wizard = wizards[action.id];  const updatedWizard = wizardReducer(wizard, action);  return {    ...wizards,    [action.id]: updatedWizard  };}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/376039.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号