> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/redux/immer.js.md).

# immer

Изменение состояния при глубокой вложенности

Когда дерево состояния имеет глубокую вложенность, то изменить его обычным способом бывает довольно сложно. Поэтому применяются различные библиотеки

* [Immutable.js](https://github.com/facebook/immutable-js) - слишком большой размер
* [immutability-helper](https://github.com/kolodny/immutability-helper) - в принципе, неплохо
* [immer](https://github.com/mweststrate/immer) - по-моему, самая лучшая.

**Примечание:** если дерево состояния имеет неглубокую вложенность, то из-за соображений производительности лучше использовать обычный способ.

Устанавливаем **immer**

> yarn add immer

Создадим файл с небольшой вспомогательной функцией **handleActions:**

Взято [отсюда](https://gist.github.com/kitze/fb65f527803a93fb2803ce79a792fff8)

{% code title="src/utils.js" %}

```jsx
import produce from 'immer'

const handleActions = (actionsMap, defaultState = {}) => (
  state = defaultState,
  { type, ...params }
) =>
  produce(state, draft => {
    const action = actionsMap[type]
    return action && action.call(draft, params)
  })

export default handleActions
```

{% endcode %}

Перепишем наш редьюсер

{% code title="src/scenes/Home/services.js" %}

```jsx
import handleActions from 'utils'
...

// Reducer
export const home = handleActions({
  SHOW_PRELOADER() {
    this.preloader = true
  },
  HIDE_PRELOADER() {
    this.preloader = false
  },
  CHANGE_TEXT({ text }) {
    this.text = text
  }
```

{% endcode %}