更新Redux中的多个值

时间:2018-07-10 20:06:43

标签: javascript reactjs redux

我正在尝试在redux中更新嵌套对象,但是我不确定我是否做得正确。由于在reducer中存在语法错误,因此下面提供的代码无法编译。

我知道这不是正确的语法,因为action.payload前没有键,但是我对将action.payload合并到[action.id]中的方式迷失了。

我试图避免为需要更新的每个键(例如updateBlockTypeupdateBlockTitleupdateBlockDescription等)创建单独的操作

发送:

this.props.dispatch(updateBlock(this.props.id, { type: e.currentTarget.id }))

操作:

export function updateBlock (id, values) {
  return {
    type: 'UPDATE_BLOCK',
    id: id,
    payload: values
  }
}

异径管:

case 'UPDATE_BLOCK':
  return {
    ...state,
      blocks: {
      ...state.blocks,
      byHash: {
        ...state.blocks.byHash,
        [action.id]: {
          ...state.blocks.byHash[action.id],
          action.payload <-- How do I merge the payload?
        }
      }
    }
  }

byHash [id]对象:

'1': { id: 1, type: 'INTRO', title: 'Some title...', description: 'Some description...' }

我构造减速器的方式可能是错误的,因此我愿意采取其他措施。

1 个答案:

答案 0 :(得分:2)

您错过了传播运算符:var puppeteer = require('puppeteer') const browser = puppeteer.launch({headless: false}).then(function(browser){ const page = browser.newPage().then(function(page){ page.emulateMedia('screen'); page.goto('url1....', {waitUntil: 'networkidle2'}).then(function(){ page.addStyleTag({url: 'url2...'}).then(function(){ page.addStyleTag({url:'url3...' }).then(function(){ page.addStyleTag({url: 'url4...'}).then(function(){ page.addStyleTag({url: 'url5...'}).then(function(){ }); }); }); }); }); }); }); ,它将把作为对象的有效载荷的属性传播到reducer中的对象条目

如果结构变得更复杂,最好将化简器组成子化简器,然后将它们与来自redux的thr ...action.payload api合并。

您还正在简化器中访问combineReducersstate.blocks。如果初始状态未定义这些键,则可能会引发错误。这是组成复杂的异径管的另一个原因。