Hub Flow: изменение состояния

Введение| Начало работы | Изменение состояния | Демо

Единственное место, где состояние должно быть изменено, находится внутри метода «реакции». Внутри реакции вы можете получить состояние с помощью hub.state

Состояние Hub Flow на самом деле является просто объектом Freezer.js. Ознакомьтесь с их README для получения полной документации. Читая документацию Freezer, помните, что freezer.get() === hub.state.

В примерах я буду использовать следующее состояние приложения:

{
  bookmarks: [
    { name: "Google", url: "www.google.com" },
    { name: "Github", url: "https://github.com" } 
   ],
  activeBookmark: { name: "", url: "" }
}

Обновить объект

Все объекты (даже глубоко вложенные) имеют метод .set(<updates>). Этот метод работает так же, как React.Component.setState()in, то есть не заменяет объект, а просто обновляет указанные свойства.

Обновить одно свойство

hub.state.activeBookmark.set({ name: "New Value" });

Обновить несколько свойств

hub.state.activeBookmark.set({ name: "New Value", url: "#" })

Обновить объект в массиве

hub.state.bookmarks[0].set({ name: "New Value"});

Заменить объект

Вы можете вызвать .reset(), если хотите полностью заменить объект. Это полезно, если вы хотите удалить все свойства без явного указания их в .set().

var bookmark = { name: "no url prop" };
// hub.state.activeBoomark.url === "#"
hub.state.activeBookmark.reset(bookmark);
// hub.state.activeBoomark.url === undefined
// This would effective work as a replace too
hub.state.set({
  activeBookmark: bookmark
});

Работа с массивами

Массивы внутри hub.state также неизменяемы, но Freezer.js реализует большинство стандартных методов массива, поэтому вам не нужно изучать новый API (например, Immutable.js). Другие методы массива.

Добавить элемент в конец массива, .push(<item>)

hub.state.bookmarks.push(newBookmark);

Добавить элемент в начало массива, .unshift(<item>)

hub.state.bookmarks.unshift(newBookmark);

Удалить элемент из массива

// Given a key, filter out the item with that key
var keyToRemove = "123";
hub.state.set({ 
  bookmarks: hub.state.bookmarks.filter(b => b.key !== key)
})