Создайте свою собственную библиотеку Redux

чтобы начать создавать библиотеку, вам нужно сделать модульную, а модульная — это самовызываемая функция, которая возвращает (что-то). Мы будем использовать «выявленный модульный шаблон».

код:

создайте файл с именем customeRedux.js и поместите в него этот код.

(function () {
  // to global controle your modular
  const customRedux = (function () {
    function createStore(reducer) {
      // declare listeners to fill it with the listener in subscribe func
      let listeners = [];

      // get state
      let state;
      const getState = () => state;

      const dispatch = function (action) {
        state = reducer(state, action);
        // call listener for each time dispatch work
        listeners.forEach((lisner) => lisner());
      };
      dispatch({});

      const subscribe = function (listener) {
        // register listener
        listeners.push(listener);
        console.log(listeners);
      };

      return {
        getState,
        dispatch,
        subscribe,
      };
    }

    return {
      createStore,
    };
  })();

  // add to window object as a property
  if (!window.customRedux) {
    window.$redux = window.customRedux = customRedux;
  }
})();

теперь, после сборки нашего Redux, нам нужно его протестировать, поэтому создайте файл с именем, например, test-my-redux.js, а затем поместите в него этот код.

console.log("$redux");
console.log($redux);

// reducer
const WITHDRAW_MONEY = "WITHDRAW_MONEY";
const DEPOSITE_MONEY = "DEPOSITE_MONEY";

const widthdraw = (amount) => {
  return {
    type: WITHDRAW_MONEY,
    payload: amount,
  };
};
const deposite = (amount) => {
  return {
    type: DEPOSITE_MONEY,
    payload: amount,
  };
};

const bankReducer = (state = 1000, action) => {
  switch (action.type) {
    case WITHDRAW_MONEY:
      return state - action.payload;
    case DEPOSITE_MONEY:
      return state + action.payload;
    default:
      return state;
  }
};

const store = $redux.createStore(bankReducer);
console.log(store);
console.log(store.getState());

store.subscribe(() => {
  console.log("BANK STATE:", store.getState());
  value.innerText = `current Bank Amounth: ${store.getState()}`;
});

/* example UI with Redux */
const amount = document.getElementById("amount");
const diposites = document.getElementById("deposite");
const widthraw = document.getElementById("widthraw");
const currentAmount = document.getElementById("currentAmount");
const value = document.getElementById("value");

value.innerText = `current Bank Amounth: ${store.getState()}`;

diposites.addEventListener("click", function () {
  store.dispatch(deposite(+amount.value));
});
widthraw.addEventListener("click", function () {
  store.dispatch(widthdraw(+amount.value));
});

Html-страница Чтобы протестировать на ней:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Build Your Own Redux (Javascript)</title>
  </head>
  <body>
    <input type="number" placeholder="amount" id="amount" />
    <button id="deposite">deposite</button>
    <button id="widthraw">widthraw</button>
    <p id="value"></p>

    <!--
    <script src="./js/script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.4.2/redux-thunk.js"></script>
    -->
    <script src="./js/customRedux.js"></script>
    <script src="./js/test-my-redux.js"></script>
  </body>
</html>

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

Создайте свою собственную библиотеку Redux

код:

Вопросы по теме