Redux Toolkit как средство эффективной Redux-разработки

Вероятнее всего лагает из-за выполнения проверок на иммутабельность хранилища и сериализуемость объектов хранилища. Отключить эти проверки можно в параметрах функции getDefaultMiddleware.

getDefaultMiddleware({
  immutableCheck: false,
  serializableCheck: false,
  thunk: true,
});

11 советов для тех, кто использует Redux при разработке React-приложений

Redux Toolkit поможет избежать большей части проблем habr.com/ru/company/inobitec/blog/481288

Redux Toolkit как средство эффективной Redux-разработки

Привожу пример:
Селектор -

import { createSelector } from 'reselect';

const getNodes = (state) => state.nodes.data;

const treeNodesSelector = createSelector(
  getNodes,
  (nodes) => { ... Строится дерево из массива (добавляется поле children, к элементам)}
);

export default treeNodesSelector;

MapStateToProps —

nodes: treeNodesSelector(state),

Хранится в store в виде массива — data: [].

Результат в DevTools —

  nodes: {
    data: [
      {
        id: '1',
        ip: '127.0.0.1',
        name: 'What is Love?',
        port: 1,
        parent_id: null,
        children: [
          {
            id: '6',
            ip: '11.1.1.1',
            name: '11',
            port: 1,
            parent_id: '1'
          }
        ]
      },...

Redux Toolkit как средство эффективной Redux-разработки

Для построения абстраций не обязательно использовать дополнительные библиотеки.

Redux Toolkit как средство эффективной Redux-разработки

Если использовать хуки Redux получится лаконичнее:

import { useSelector } from 'react-redux';

const isLastPage = useSelector(
  ({ page }) => page.products.length === page.totalCount
);

Redux Toolkit как средство эффективной Redux-разработки

Из статьи по вашей ссылке: you are not required to use selector functions in a Redux app, а также сказано “Similarly, you don't have to use the Reselect library to create selectors — you can just write plain functions if you want”

Redux Toolkit как средство эффективной Redux-разработки

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

Последние версии Redux Devtools (2.15 точно) это позволяют.

Redux Toolkit как средство эффективной Redux-разработки

В большинстве случаев необходимо использовать прямую выборку из стэйта. Предпочтительное использование мемоизации заключается не в получении сложных выборок, а кэшировании комплексных, часто запрашиваемых данных в случае, если начинает провисать производительность. По поводу производительности и ее преждевременной оптимизации можно ознакомиться со следующей статьей: optimization guide.

Стор хранит нормализованные данные, данные можно нормализовывать как угодно до их попадания в стор. А после пользоваться ими как удобно. Селекторы модифицируют изъятые данные в конкретном месте, а Redux DevTools может это отображать как цельное состояние, это и имелось ввиду.

Redux Toolkit как средство эффективной Redux-разработки

Redux DevTools способен обрабатывать модифицированный селекторами store, и выводить его в общем виде. А селекторы “болтаются отдельно”, потому что не являются часто используемой фичей.
Такое понятие “мутаторы” к Redux не относится.
Низкая популярность прежде всего связана с тем, что релиз библиотеки версии 1.0 состоялся всего 2 месяца назад.
Redux toolkit как раз и призван решить проблемы выбора подходящих средств из всего разнообразия в типичных случаях использования.

Redux. Простой как грабли

habr.com/ru/company/inobitec/blog/481288

Redux Toolkit как средство эффективной Redux-разработки

Действительно, сам по себе React фреймворком не является. Технически, это библиотека для создания пользовательских интерфейсов. Но за время своего существования эта либа обросла достаточно большой экосистемой с внушительным набором лучших практик и инструментов, что позволяет работать со всем этим как с фреймворком.