Как использовать Immutable.js с сокращением?

Question

Redux framework использует reducers, чтобы изменить состояние приложения в ответ на действие.

Ключевым требованием является то, что редуктор не может изменять существующий объект состояния; он должен создать новый объект.

Дурной пример:

import { 
    ACTIVATE_LOCATION 
} from './actions'; 

export let ui = (state = [], action) => { 
    switch (action.type) { 
     case ACTIVATE_LOCATION: 
      state.activeLocationId = action.id; 
      break; 
    } 

    return state; 
}; 

Хороший пример:

import { 
    ACTIVATE_LOCATION 
} from './actions'; 

export let ui = (state = [], action) => { 
    switch (action.type) { 
     case ACTIVATE_LOCATION: 
      state = Object.assign({}, state, { 
       activeLocationId: action.id 
      }); 
      break; 
    } 

    return state; 
}; 

Это хороший случай использования для Immutable.js.

Answer 1

Берем хороший пример с неизменяемыми

import { 
    ACTIVATE_LOCATION 
} from './actions'; 

import { Map } from 'immutable'; 

const initialState = Map({}) 

export let ui = (state = initialState, action) => { 
    switch (action.type) { 
    case ACTIVATE_LOCATION: 
     return state.set('activeLocationId', action.id); 
    default: 
     return state; 
    } 
}; 

Answer 2

Иммутируемый.js должен использоваться в каждом редукторе по мере необходимости, например.

import { 
    ACTIVATE_LOCATION 
} from './actions'; 

import Immutable from 'immutable'; 

export let ui = (state, action) => { 
    switch (action.type) { 
     case ACTIVATE_LOCATION: 
      state = Immutable 
       .fromJS(state) 
       .set('activeLocationId', action.id) 
       .toJS(); 
      break; 
    } 

    return state; 
}; 

Однако, есть много накладных расходов в этом примере: каждое действие времени редуктор будет вызван, он должен преобразовать объект JavaScript к экземпляру Неизменное, мутировать полученный объект и преобразовать его обратно в Объект JavaScript.

Лучший подход должен иметь начальное состояние экземпляра незыблемыми:

import { 
    ACTIVATE_LOCATION 
} from './actions'; 

import Immutable from 'immutable'; 

let initialState = Immutable.Map([]); 

export let ui = (state = initialState, action) => { 
    switch (action.type) { 
     case ACTIVATE_LOCATION: 
      state = state.set('activeLocationId', action.id); 
      break; 
    } 

    return state; 
}; 

Таким образом, вам нужно только, чтобы преобразовать исходное состояние к экземпляру Immutable унции. Затем каждый редуктор будет рассматривать его как экземпляр Immutable и передать его по линии в качестве примера Immutable. Уловка заключается в том, что теперь вам нужно передать все состояние JavaScript перед передачей значений в контекст представления.

Если вы выполняете несколько мутаций состояния в редукторе, вы можете рассмотреть batching mutations с помощью .withMutations.

Чтобы сделать вещи проще, я разработал библиотеку redux-immutable. Он обеспечивает функцию combineReducers, эквивалентную функции с тем же именем в пакете redux, за исключением того, что он ожидает, что начальное состояние и все редукторы будут работать с объектом Immutable.js.

Answer 3

Если вы ищете простой способ сделать обновления без мутации, я поддерживаю библиотеку: https://github.com/substantial/updeep, которая, на мой взгляд, является хорошим способом сделать это с помощью redux.

updeep позволяет работать с регулярными (замороженными) иерархиями объектов, поэтому вы можете выполнять деструктурирование, просматривать объекты в журналах и отладчике и т. Д. Он также имеет мощный API, который позволяет выполнять пакетное обновление. Он не будет таким же эффективным, как Immutable.js для больших наборов данных, потому что он клонирует объекты, если это необходимо.

Вот пример (но проверить те в README для более):

import { 
    ACTIVATE_LOCATION 
} from './actions'; 
import u from 'updeep'; 

export let ui = (state = [], action) => { 
    switch (action.type) { 
     case ACTIVATE_LOCATION: 
      state = u({ activeLocation: action.id }, state); 
      break; 
    } 

    return state; 
}; 

Answer 4

Посмотрите на https://github.com/indexiatech/redux-immutablejs

Это в значительной степени a combineReducer и опционально createReducer, который соответствует стандартам Redux.

Answer 5

Принятый ответ не должен быть принятым ответом. Вы должны инициализировать состояние с помощью неизменны и чем, как упоминалось ранее использование Redux-immutablejs

const initialState = Immutable.fromJS({}) // or Immutable.Map({}) 

const store = _createStore(reducers, initialState, compose(
    applyMiddleware(...middleware), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
)); 

чем использовать combineReducers из Redux-immutablejs

Дополнительный совет: Использование реагировать-маршрутизатор-перевождь работает довольно хорошо, так если вы хотели бы добавить это то заменить редуктор от среагировать-маршрутизатора-Redux с этим:

import Immutable from 'immutable'; 
import { 
    UPDATE_LOCATION 
} from 'react-router-redux'; 

let initialState; 

initialState = Immutable.fromJS({ 
    location: undefined 
}); 

export default (state = initialState, action) => { 
    if (action.type === UPDATE_LOCATION) { 
     return state.merge({ 
      location: action.payload 
     }); 
    } 

    return state; 
}; 

Просто импортируйте это в корневой редуктор

Это также указано в документации Redux-immutablejs