Когда использовать .toJS() с Immutable.js и Flux?

Question

Я пытаюсь использовать ImmutableJS с моим приложением React/Flux.

Мои магазины Immutable.Map объектов.

Мне интересно, в каком пункте следует использовать .toJS()? Должно быть, когда возвращается .get(id) магазина? или в компонентах с .get('member')?

Answer 1

Хороший вопрос, поднятый @Hummlas.

Я Personnally использовать его в своих Реагировать компонентов, когда я перебрать коллекции, чтобы сделать массив вспомогательных компонентов:

this.props.myImmutableCollection.map(function(item, index) { 
    React.DOM.div null, item.get('title'); 
}).toJS(); 

Если вы не используете .toJS(), React не признает отображенные элементы в виде массива компонентов.

Answer 2

В идеале, никогда!

Если в ваших магазинах Flux используется Immutable.js, попробуйте выполнить весь путь до конца. Используйте React.addons.ReactComponentWithPureRenderMixin для достижения выигрыша производительности memoization (он добавляет методы shouldComponentUpdate).

При визуализации, вам может понадобиться вызвать toJS() в React v0.12.x принимает только Array как дети:

render: function() { 
    return (
    <div> 
     {this.props.myImmutable.map(function (item) { 
     <div>{item.title}</div> 
     }).toJS()} 
    </div> 
); 
} 

Это изменилось в React v0.13.x. Компоненты принимают любые Iterable как дети, а не только Array. Поскольку Immutable.js реализует Iterable, вы можете опустить toJS():

render: function() { 
    return (
    <div> 
     {this.props.myImmutable.map(function (item) { 
     <div>{item.title}</div> 
     })} 
    </div> 
); 
} 

Answer 3

- больше не рекомендуется -
При использовании Redux я, как правило, пусть mapStateToProps моих Подключается Функция преобразования неизменных структур с использованием toJS() и позволяют моим компонентам реагировать на использование реквизита в качестве объектов javascript.

Answer 4

Собственный старый вопрос, но в последнее время я экспериментирую с этим подходом, используя reselect и lodash's memoize в попытке вернуть сопоставимые объекты в компоненты React's.

Представьте иметь магазин как это:

import { List, Map } from 'immutable'; 
import { createSelector } from 'reselect'; 
import _ from 'lodash'; 

const store = { 
    todos: List.of(
     Map({ id: 1, text: 'wake up', completed: false }), 
     Map({ id: 2, text: 'breakfast', completed: false }) 
    ) 
}; 

const todosSelector = state => state.todos; 

function normalizeTodo(todo) { 
    // ... do someting with todo 
    return todo.toJS(); 
} 

const memoizeTodo = _.memoize(normalizeTodo); 

export const getTodos = createSelector(
    todosSelector, 
    todos => todos.map(memoizeTodo) 
); 

Тогда я прохожу к TodoList компонента todos в качестве опоры, которая будет отображенный в 2 TodoItem Компоненты:

class TodoList extends React.Component { 
    shouldComponentUpdate(nextProps) { 
     return this.props.todos !== nextProps.todos; 
    } 

    render() { 
     return (<div> 
      {this.props.todos.map(todo => <TodoItem key={todo.id} todo={todo} />)} 
     </div>); 
    } 
} 

class TodoItem extends React.Component { 
    shouldComponentUpdate(nextProps) { 
     return this.props.todo !== nextProps.todo; 
    } 

    // ... 
} 

Таким образом, , если ничего не изменилось в магазине todos, когда я вызываю getTodos() reselect возвращает мне тот же объект, и поэтому ничего не перерисовывается.

Если, например, todo с id 2 si, отмеченное как завершенное, оно также изменяется в магазине, и поэтому новый объект возвращается todosSelector. Затем todos отображаются функцией memoizeTodo, которая должна возвращать тот же объект, если todo не изменяется (поскольку они являются неизменяемыми картами).Поэтому, когда TodoList получает новые реквизиты, он повторно рендерится, потому что todos изменился, но только второй TodoItem повторный рендер, потому что объект, представляющий todo с id 1, не изменился.

Это, безусловно, может привести к потере производительности, особенно если наш магазин содержит много предметов, но я не заметил никаких проблем в своем приложении среднего размера. Поверхность этого подхода заключается в том, что ваши компоненты получают простые javascript-объекты в качестве реквизита и могут использовать их с чем-то вроде PureRenderMixin, поэтому, как объекты возвращаются из магазина, больше не занимается компонентами.

Надеется, что это имеет смысл, мой английский очень плохо:/

Answer 5

Как @LeeByron сказал, вы не должны вызывать toJS. Под Реагировать 0.14 *, называя map на непреложный Map будет работать и правильно делают, но вы будете в конечном вверх с предупреждением:.

Использование Карт, как дети еще полностью не поддерживается. Это экспериментальная функция, которая может быть удалена. Преобразуйте его в последовательность/iterable из ключевых ReactElements.

Чтобы справиться с этим, вы можете позвонить toArray() на вашем Map как:

render() { 
    return (
    <div> 
     {this.props.immutableMap.toArray().map(item => { 
     <div>{item.title}</div> 
     })} 
    </div> 
) 
} 

Преобразование вашей итерации в массив и давая React, что он хочет.