OTUS

Мемоизация — сохранение результатов выполнения функций для предотвращения повторных вычислений. Это один из способов оптимизации, применяемый для увеличения скорости выполнения компьютерных программ.

Когда нужна мемоизация?

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

https://habr.com/ru/company/ruvds/blog/332384/
https://underscorejs.org/docs/underscore.html#section-82

Селектор - функция (чистая), которая вытягивает из state определенные данные

const selectNextState = (state) => state.nextMove;

Имеет смысл выносить часть логики в селекторы, потому что:

• селекторы, как чистые функции легко тестировать
• селекторы могут быть переиспользованы между компонентами
• на уровне селекторов можно включать дополнительные оптимизации (в т.ч. мемоизацию)

Reselect позволяет создавать селекторы, которые обладают следующими свойствами:

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

https://redux.js.org/recipes/computing-derived-data/

Reselect - createSelector

/* one selector */
export function createSelector<S, R1, T>(
  selector: Selector<S, R1>,
  combiner: (res: R1) => T
): OutputSelector<S, T, (res: R1) => T>;

export function createSelector<S, P, R1, T>(
  selector: ParametricSelector<S, P, R1>,
  combiner: (res: R1) => T
): OutputParametricSelector<S, P, T, (res: R1) => T>;

/* two selectors */
export function createSelector<S, R1, R2, T>(
  selector: Selector<S, R1>,
  selector: Selector<S, R2>,
  combiner: (res1: R1, res2: R2) => T
): OutputSelector<S, T, (res1: R1, res2: R2) => T>;

export function createSelector<S, P, R1, R2, T>(
  selector: ParametricSelector<S, P, R1>,
  selector: ParametricSelector<S, P, R2>,
  combiner: (res1: R1, res2: R2) => T
): OutputParametricSelector<S, P, T, (res1: R1, res2: R2) => T>;

https://github.com/reduxjs/reselect#api

const getFilledCellsCount = (state) => countFiledCells(state.gameField);

const getFilledCellsCountFactorial = createSelector(
  getFilledCellsCount,
  (count) => getFactorial(count)
);

https://github.com/reduxjs/reselect#api

При этом можно использовать параметризованные селекторы:

export const getOrderById = createSelector(
  getAllOrders, // { [key: number] : OrderDetails }
  // https://github.com/reduxjs/reselect/blob/v4.0.0/typescript_test/test.ts#L107
  (_state, orderId: number) => orderId,
  (ordersByid, orderId): Optional<OrderDetails> => ordersById[orderId]
);

НО! нужно помнить, что размер кэша у селекторов из createSelector === 1

https://github.com/reduxjs/reselect#api
https://github.com/reduxjs/reselect#use-memoize-function-from-lodash-for-an-unbounded-cache

Вопросы?

Redux Toolkit - actions

function someActionCreator1(payload: { name: string; age: number }) {
  return {
    type: "SOME_ACTION",
    payload,
  };
}

const someActionCreator2 = createAction<{ name: string; age: number }>(
  "SOME_ACTION"
);

https://redux-toolkit.js.org/api/createAction

if (action.type === "SOME_ACTION") {
  action.payload. // nothing here
}

if (someActionCreator2.match(action)) {
  action.payload. // we know the payload
}

https://basarat.gitbook.io/typescript/type-system/typeguard

function counter(state = 0, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}

const counter = createReducer(0, {
  [increment]: (state) => state + 1,
  [decrement]: (state) => state - 1,
});

https://redux-toolkit.js.org/api/createReducer

const reducer = createReducer(
  {
    totalAge: 0,
    names: "",
  },
  {
    [someActionCreator2.type]: (state, action) => ({
      totalAge: state.totalAge + action.payload.age,
      names: state.names + " " + action.payload.name,
    }),
  }
);

https://redux-toolkit.js.org/api/createReducer

Вопросы?

const reducer = createReducer(
  {
    totalAge: 0,
    names: "",
  },
  {
    [someActionCreator2.type]: (state, action) => {
      state.totalAge += action.payload.age;
      state.names += ", " + action.payload.name;
      return state;
    },
  }
);

https://redux-toolkit.js.org/api/createReducer#direct-state-mutation

Вопросы?

export declare interface Slice<
  State = any,
  CaseReducers extends SliceCaseReducers<State> = SliceCaseReducers<State>,
  Name extends string = string
> {
  /**
   * The slice name.
   */
  name: Name;
  /**
   * The slice's reducer.
   */
  reducer: Reducer<State>;
  /**
   * Action creators for the types of actions that are handled by the slice reducer.
   */
  actions: CaseReducerActions<CaseReducers>;
  /**
   * The individual cae reudcer functions that were passed in the `reducers` parameter.
   * This enables reuse and testing if they were defined inline when calling `createSlice`.
   */
  caseReducers: SliceDefinedCaseReducers<CaseReducers>;
}

https://redux-toolkit.js.org/api/createSlice

const counterSlice = createSlice({
  name: "counter",
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

document.getElementById("increment").addEventListener("click", () => {
  store.disptch(counterSlice.actions.increment());
});

https://redux-toolkit.js.org/tutorials/basic-tutorial#introducing-createslice

Вопросы?

Redux Toolkit API

1. configureStore
2. getDefaultMiddleware
3. createReducer
4. createAction
5. createSlice
6. createSelector
7. createAsyncThunk
8. createEntityAdapter
9. Other Exports

Redux Toolkit - configureStore

type ConfigureEnhancersCallback = (
  defaultEnhancers: StoreEnhancer[]
) => StoreEnhancer[];

interface ConfigureStoreOptions<S = any, A extends Action = AnyAction> {
  // A single reducer function that will be used as the root reducer, or an
  // object of slice reudcers that will passed to `combineReducers()`
  reducer: Reducer<S, A> | ReducersMapObject<S, A>;
  // An array of Redux middleware to install
  middleware?: Middleware<{}, S>[];
  // Whether to enable Redux DevTools integration. Defaults to `true`.
  // Additional configuration can be done by passing Redux Devtools options
  devTools?: boolean | DevToolsOptions;
  // the initial state, same as Redux's createStore.
  preloadedState?: DeepPartial<S extends any ? S : S>;
  // The store enhancers to apply. See Redux's `createStore()`.
  enhancers?: StoreEnhancer[] | ConfigureEnhancersCallback;
}

https://redux-toolkit.js.org/api/configureStore

Вопросы?

1. Redux-actions
2. typesafe-actions
3. Rematch

Стоит почитать

Совершенствуем Redux

https://habr.com/ru/post/491848/

Вопросы?

Types vs Features

Организация кода в масштабных React проектах

Вопросы?

В чем плюсы использования Redux Toolkit ?

Какие библиотеки идут

в составе Redux Toolkit ?

Дополнительные материалы

1. Идиоматический Redux: Redux Toolkit 1.0
2. Redux Toolkit как средство эффективной Redux-разработки
3. Redux Toolkit Tutorial ( и продолжения раз и два)
4. Deep Dive into Redux Toolkit with React - Complete Guide