Immutable.js without redux, how do I create new lists without explicitly naming them?


72 просмотра

1 ответ

I'm trying to learn current best data management practices and as far as I can tell that means stateless / stateful components and immutable data structure. I'm having problems with implementing latter (immutables). I'm trying to incorporate it into angular 2 without redux. Redux is on my list of things to learn but for now I want to use immutable.js without redux.

---The problem---
How do I create a copy of an array in a service and return it on demand? I have this example code (just for illustration purposes, I haven't tested it!):

import { Product } from './product';
import { Immutable } from './immutable';

export class ProductListService {
    let id = 0;

    const cheese  = new Product(id++, 'cheese');
    const ham  = new Product(id++, 'ham');
    const milk = new Product(id++, 'milk');

    // I fill the list with some sample data
    let oldProductList = Immutable.List.of(cheese, ham, milk);
    let newProductList = [];
    let returnProductList = oldProductList;

    getProductList() {
        return returnProductList;

    addProduct() {
        // As far as I know, this creates a deep immutable copy
        newProductList = oldProductList.withMutations(function (list) {
            list.push(new Product(id++, 'name'););
        returnProductList = newProductList;
        oldProductList = newProductList;

The above code is based on the example from the official docs where they just add a number to the variable each time they create a copy (I understand that is only for example purposes?). How do I go about creating new lists without using numbers? Do I use oldList / newList? Do I dynamically create new numbers for new variables so that I have a history of objects?

I feel I'm doing something wrong on a architectural level here. What is the correct approach? All immutable.js examples are using redux or show no real-life example, does someone know of a good material to learn about immutalbe.js (+ possible ng2?)


Автор: Baki Источник Размещён: 08.11.2019 11:27

Ответы (1)

0 плюса

Not sure i fully understand what you want to do here, but consider this:if you just want to push one element to the list you should not use withMutations.

let list1 = Immutable.List(['one'])
let list2 = list1.push('two')
console.log(list1.toJS()) // ['one']
console.log(list2.toJS()) // ['one', 'two']

Applying a mutation to create a new immutable object results in some overhead, which can add up to a minor performance penalty. use withMutations only If you need to apply a series of mutations locally before returning

let list1 = Immutable.List(['one'])
var list2 = list1.withMutations(function (list) {
console.log(list1.toJS()) //["one"]
console.log(list2.toJS()) //["one", "two", "three", "four", "five"]

here we create a temporary mutable (transient) copy of list 1 and apply a batch of mutations in a performant manner by using withMutations

I hope that answers your question

Автор: Sagi Medina Размещён: 21.08.2016 11:01
Вопросы из категории :