Как настроить Ember как вычисляемые свойства в Immutablejs и Redux и Flux и реагировать

Я привык вычислять свойства в Объектная Модель Ember. Это удобный способ указать вычисляемые свойства, которые зависят от других свойств.

сказать fullName зависит от firstName и lastName, Я могу настроить вычисляемые свойства как функция computeProperties и звонок computeProperties каждый раз, когда я вношу изменения.

пример:

function computeFullName(state) {
  const fullName = state.get('firstName') + state.get('lastName');
  const nextState = state.set('fullName', fullName);
  return nextState;
}

function computeProperties(state) {
  const nextState = computeFullName(state);
  return nextState;
}

// store action handler
[handleActionX](state) {

  let nextState = state.set('firstName', 'John');
  nextState = state.set('lastName', 'Doe');

  nextState = computeProperties(nextState);

  return nextState;
}

есть ли способ автоматически настроить вычисляемые свойства, чтобы мне не приходилось вызывать дополнительные функции каждый время. В Redux или в ImmutableJS.

9
flux immutable.js reactjs redux

4 ответов

Redux автор здесь!

используя reselect как предложено WildService - это путь. Я думаю, мы не будем включать это в core, потому что reselect делает свою работу хорошо, и мы в порядке с тем, что это отдельная библиотека.

Я хотел отметить пару вещей:

  • даже при повторном выборе вы не хотите вычислять данные внутри вашего редуктора. Селекторы должны работать on государство, управляемое редукторами. Иначе говоря, селекторы-это шаг между вашим состоянием магазина Redux и вашими компонентами-они не находятся внутри ваших редукторов. важно, чтобы состояние Redux было нормализовано, поэтому его легко обновить.

  • мы на самом деле рекомендуем вам определить селекторы вместе с соответствующие редукторы, так что когда вы меняете форму состояния, вам не нужно менять свои компоненты-вместо этого они будут использовать селекторы. Вы можете увидеть пример это в Redux папка сравнения потоков

  • У нас есть страница документации введение reselect и описание того, как использовать его для вычисления производных данных. Проверить его.

11

проверить выберите. Composable чисто функции для эффективно вычислять выведенные данные от магазинов. Afaik есть планы свернуть селекторы reselect в Redux core на каком-то этапе, если они окажутся популярными. Есть пример использования с ImmutableJS в нижней части readme тоже.

4

для создания вычисляемых свойств можно использовать автономную наблюдаемую библиотеку mobservable.

var user = mobservable.props({
  firstName: 'John',
  lastName: 'Doe',
  fullName: function() {
    return this.firstName + this.lastName
  }
});

var nameViewer = mobservable.ObservingComponent(React.createClass({
   render: function() {
       return (<span>{user.fullName}</span>)
   }
});

это должно быть сутью этого, теперь любое изменение пользователя.firstName или lastName будет повторно передавать ваш компонент nameViewer. Вы можете дополнительно объединить это с реализациями потока, такими как redux, чтобы изменить данные и протолкнуть самого пользователя через дерево компонентов. Но обратите внимание, что сам объект пользователя не неизменяемый (в этом случае это не будет наблюдаемый в конце концов ;-)) Также см. Это тривиальные и немного интереснее скрипки для некоторых примеров.

1

Как насчет чего-то подобного?

export const getWidgetsWithComputedProps = widgets => {
  return widgets.map(w => getWidgetWithComputedProps(w));
};

export const selectWidgetType = widget => {
  switch (widget.type) {
    case 'line':
      return 'time-series';
    case 'pie':
    case 'bar':
      return 'cross-sectional';
    default:
      console.warn('Back up: that type of widget does not exist!', widget.type);
      return null;
  }
};

export const getWidgetWithComputedProps = createSelector(
  widget => widget,
  selectWidgetType,
  (widget, _type) => {
    return {...widget, _type}
  }
);
0