在javascript中更新对象中的值的功能方法

I'm trying to follow todo-app with react. I am writing "update all as completed" function, in flux.

我正在尝试跟随todo-app做出反应。我正在编写“全部更新完成”功能。

while in redux todomvc example, todos are array

而在redux todomvc示例中,todos是数组

state = [{id: 1, text: "Read flux", completed: false}, ...]

so they use this method

所以他们使用这种方法

const areAllMarked = state.every(todo => todo.completed)
return state.map(todo => Object.assign({}, todo, {
    completed: !areAllMarked
}))

https://github.com/reactjs/redux/blob/master/examples/todomvc/reducers/todos.js

but i am using todos as a Object like {id: todo}

但我使用todos作为对象,如{id:todo}

state = {1: {text: "Read flux", completed: false}, ...}

then, is there any proper, functional way to get updated object with Object.assign?

那么,是否有任何适当的,功能性的方式来获取Object.assign的更新对象?

2 个解决方案

#1

I would recommend the object spread operator. This is part of ES7 specification, so make sure to have the respective babel plugin installed. This code makes use of the spread operator and calls a nested todo reducer, which is in charge of changing single todos (code from Dan Abramovs egghead tutorial):

我会推荐对象传播运算符。这是ES7规范的一部分,因此请确保安装了相应的babel插件。这段代码使用了spread操作符并调用了一个嵌套的todo reducer,它负责改变单个todos(来自Dan Abramovs egghead教程的代码):

const byId = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_TODO':
    case 'TOGGLE_TODO':
      return {
        ...state,
        [action.id]: todo(state[action.id], action),
      };
    default:
      return state;
  }
};

The nested reducer could look like:

嵌套的reducer可能看起来像:

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false,
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }
      return {
        ...state,
        completed: !state.completed,
      };
    default:
      return state;
  }
};

#2

I use a cool immutability helper library called timm.

我使用一个名为timm的酷的不变性帮助库。

Really helpful in doing the non-mutation based updates without having to change too much in your code (like when using Immutable.js). It does the job fast and well.

在完成基于非变异的更新时非常有用,而无需在代码中进行太多更改(例如使用Immutable.js时)。它能够快速,顺利地完成工作。

Here is an implementation using your code example:

以下是使用您的代码示例的实现:

import timm from 'timm'; 

const updatedState = timm.setIn(state, ['1', 'completed'], true);

Immutability.js is far stronger, and often gets recommended as the de facto library for immutability in JS, but it is a pretty heft library and makes you access your objects/array in a non-native manner so you lose cool things like destructuring.

Immutability.js更强大,经常被推荐为JS中不变性的事实库,但它是一个非常重要的库,让你以非原生方式访问你的对象/数组,这样你就会失去像解构这样的很酷的东西。

I am not knocking Immutability.js, in my opinion it is probably the strongest in the market, however sometimes you don't need a full blown chainsaw when a simple knife will do. Start with something that has low friction and cost and work your way up the stack as and when you identify a problem that a stronger tool would solve.

我不是在敲Immutability.js,在我看来它可能是市场上最强劲的,但是有时候当一把简单的刀子做的时候你不需要一个完整的电锯。从一个具有低摩擦和成本的东西开始,当你发现一个更强大的工具可以解决的问题时,就可以在堆栈中上升。

#1

const byId = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_TODO':
    case 'TOGGLE_TODO':
      return {
        ...state,
        [action.id]: todo(state[action.id], action),
      };
    default:
      return state;
  }
};