функциональный способ обновить значения в объекте в JavaScript

0

Я пытаюсь следовать todo-app, реагируя. Я пишу "обновить все как завершенную" функцию, в потоке.

в то время как в примере redux todomvc todos являются массивами

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

поэтому они используют этот метод

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

но я использую todos как объект, например {id: todo}

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

то есть ли какой-либо правильный, функциональный способ получить обновленный объект с Object.assign?

Теги:
functional-programming

2 ответа

0
Лучший ответ

Я бы рекомендовал оператора распространения объектов. Это часть спецификации ES7, поэтому убедитесь, что установлен соответствующий плагин babel. Этот код использует оператор спреда и вызывает вложенный редуктор todo, который отвечает за изменение одиночных todos (код из учебника Egman Dan Abramovs):

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;
  }
};

Вложенный редуктор может выглядеть так:

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;
  }
};
0

Я использую классную библиотеку-помощник, которая называется timm.

Очень полезно делать обновления без мутации, не меняя слишком много в вашем коде (например, при использовании Immutable.js). Это делает работу быстро и хорошо.

Вот пример реализации с использованием примера кода:

import timm from 'timm'; 

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

Immutability.js намного сильнее и часто получает рекомендацию в качестве библиотеки де-факто для неизменности в JS, но это довольно сложная библиотека и позволяет вам получить доступ к своим объектам/массиву не-родным образом, чтобы вы теряли классные вещи, такие как деструктурирование.

Я не стучаю Immutability.js, по-моему, это, вероятно, самый сильный на рынке, однако иногда вам не нужна полная выдувная бензопила, когда будет работать простой нож. Начните с чего-то, что имеет низкое трение и стоимость, и прокладывайте себе путь вверх по стеку, и когда вы определяете проблему, которую решит более сильный инструмент.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню