Frontend | Вопросы собесов

🤔 Какие правила у работы redux ?



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



🚩Основные принципы



🟠Единый источник правды

Все состояние приложения хранится в одном объекте хранилища (store). Это обеспечивает централизованное управление состоянием, что упрощает отладку и тестирование. В приложении должно быть только одно хранилище.

import { createStore } from 'redux';

   import rootReducer from './reducers';



   const store = createStore(rootReducer);   

🟠Состояние доступно только для чтения

Единственный способ изменить состояние — это отправить действие (action), описывающее изменение. Действия — это простые объекты, которые имеют свойство type и, возможно, дополнительные данные. Изменения состояния должны происходить только через действия.

const increment = () => ({

     type: 'INCREMENT',

   });



   store.dispatch(increment());

🟠Изменения состояния происходят с помощью чистых функций

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

const initialState = {

  count: 0,

};



const counterReducer = (state = initialState, action) => {

  switch (action.type) {

    case 'INCREMENT':

      return {

        ...state,

        count: state.count + 1,

      };

    case 'DECREMENT':

      return {

        ...state,

        count: state.count - 1,

      };

    default:

      return state;

  }

};



const store = createStore(counterReducer);

   

🚩Дополнительные правила и рекомендации



🟠Избегайте мутаций состояния:

Состояние в Redux должно быть неизменяемым. Вместо изменения текущего состояния, редюсеры должны возвращать новые объекты состояния. Используйте методы, которые не изменяют исходные объекты, такие как Array.prototype.map, Array.prototype.filter, и оператор распространения (spread operator) для создания новых объектов и массивов.

const newState = {

  ...state,

  count: state.count + 1,

};

🟠Используйте сериализуемые действия и состояния

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

const action = {

  type: 'ADD_TODO',

  payload: {

    id: 1,

    text: 'Learn Redux',

  },

};

🟠Используйте нормализованные состояния: Храните состояния в нормализованной форме, чтобы избежать избыточности данных и упростить управление состояниями. Например, используйте объекты, где ключами являются идентификаторы, а значениями — данные.

const initialState = {

  todos: {

    byId: {

      1: { id: 1, text: 'Learn Redux' },

      2: { id: 2, text: 'Build an app' },

    },

    allIds: [1, 2],

  },

};

Ставь 👍 и забирай 📚 Базу знаний