Реализация createStore, диспетчеризации и комбинирования Redux в Javascript

Как мы знаем, createStore — это основная функция библиотеки Redux, которая позволяет разработчикам создавать хранилище, которое является центральным местом хранения состояния приложения. Он предоставляет простой, но мощный способ управления состоянием и позволяет отправлять действия для обновления состояния предсказуемым образом. Эта функция принимает функцию редуктора, необязательное начальное состояние и необязательный расширитель, что позволяет разработчикам настраивать поведение хранилища. Функция createStore формирует основу архитектуры Redux, обеспечивая однонаправленный поток данных и обеспечивая эффективное обновление и изменение состояния в сложных приложениях.

Реализация нашей функции createStore.

const createStore = (reducer) => {
  let currentState = reducer(undefined, {});
  return {
    getState: () => {
      return currentState;
    },
    dispatch: (action) => {
      currentState = reducer(currentState, action);
    },
  };
};

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

Реализация нашей функции combineReducers

const combineReducers = (reducers) => {
  return (state = {}, action) => {
    let newState = {};
    for (let key in reducers) {
      newState[key] = reducers[key](state[key], action);
    }
    return newState;
  };
};

Определение наших констант действий

const actions = {
  ACTION1: "ACTION1",
  ACTION2: "ACTION2",
};

Определение нашего первого редьюсера

const initialState1 = {
  value: 10,
};

const reducer1 = (state = initialState1, action) => {
  const currVal = state.value;
  switch (action.type) {
    case actions.ACTION1:
      return { ...state, value: currVal + action.payload.value };
    case actions.ACTION2:
      return { ...state, value: currVal - action.payload.value };
    default:
      return state;
  }
};

Определение нашего второго редьюсера

const initialState2 = {
  value: 5,
};

const reducer2 = (state = initialState2, action) => {
  const currVal = state.value;
  switch (action.type) {
    case actions.ACTION1:
      return { ...state, value: currVal + action.payload.value };
    case actions.ACTION2:
      return { ...state, value: currVal - action.payload.value };
    default:
      return state;
  }
};

Объединение наших редукторов с помощью функции combineReducers, созданной выше.

const reducer = combineReducers({ red1: reducer1, red2: reducer2 });

Создание магазина

const store = createStore(reducer);

Определение наших действий

const action1 = {
  type: actions.ACTION1,
  payload: {
    value: 2,
  },
};

const action2 = {
  type: actions.ACTION2,
  payload: {
    value: 1,
  },
};

Тестирование нашего кода для различных сценариев.

console.log(store.getState());
store.dispatch(action1);
console.log(store.getState());
store.dispatch(action2);
console.log(store.getState());

Вывод

{ red1: { value: 10 }, red2: { value: 5 } }
{ red1: { value: 12 }, red2: { value: 7 } }
{ red1: { value: 11 }, red2: { value: 6 } }

Ура, это работает!!!

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

Реализация createStore, диспетчеризации и комбинирования Redux в Javascript

Похожие вопросы