Рубрики
Без рубрики

Реализация рисунка Redux

Если вы разработчик программного обеспечения и не в другом мире, вы, вероятно, читали или слышали … Tagged с помощью TypeScript, JavaScript, Redux, WebDev.

Если вы разработчик программного обеспечения и не в другом мире, вы, вероятно, читали или слышали что -то о Redux. Сегодня Redux очень популярен, но не так много лет назад. В первый раз, когда я услышал о React, вторым словом всегда было Redux, «как начать с React и Redux», «Todo App с React Redux» и еще сотнями имен. Несмотря на то, что Redux сегодня не так популярен, как в прошлом, я думаю, что очень полезно, что вы знаете, как работает Redux и как вы можете создать простую версию этого знаменитого шаблона.

Redux – это шаблон, который обеспечивает способ управления состоянием вашего приложения. Паттерн Redux увеличился в популярности, когда фронтальные приложения стали более сложными, и когда мы начали разрабатывать приложения со многими компонентами, делясь тем же состоянием. Вы можете найти много библиотек, которые реализуют это, у нас есть Redux для React и NGXS и NGRX для Angular.

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

Redux объяснения

  • Действия – в основном действия похожи на инструкции, которые стимулируют ваши намерения, вам нужен Тип Это описывает то, что вы хотите сделать, и если вам нужны некоторые данные для выполнения ваших намерений, необходимо предоставить полезная нагрузка Анкет

    •  
  • Редакторы – Reducers – это чистые функции, которые выполняют ваши намерения в состоянии приложения, эта функция получает текущее состояние и действие, которое выполняется. Для каждого действия вы должны предоставить реакцию в своем редукторе.
     
    •  
  • Магазин – мне нравится думать о магазине как о месте, где у вас есть настоящее состояние, и он предоставляет ресурсы для получения государства Store.getState () и зарегистрировать слушателей.
 
Наш Redux API
 
Вот как мы будем инициировать наш магазин.
 
const store = new Store(reducers, initialState)

 
Наша реализация Redux имеет некоторые публичные методы и личный метод:
 
  • отправлять() – Этот метод получит инструкцию, которая будет способствовать изменению состояния.
    •  
  • antiquiber () – С помощью этого метода мы можем подписаться на слушателей, чтобы узнать, когда изменение состояния приложения. Эти слушатели будут простыми функциями, которые могут получить новое состояние, измененное в качестве аргумента.
    •  
  • value () – Эти методы возвращают текущее состояние приложения.
 
class Store{
    constructor(){}

    dispatch()

    subscriber()
}

 
Нам нужен другой метод для выполнения изменений состояния, Reducer это последний метод, который нам нужен в нашей реализации.
 
class Store{
    //...
    private reduce()
}

 
Хорошо, нам нужно больше, чем методы в нашей реализации Redux, нам нужно свойство для удержания приложения штата, Государство и другой, чтобы удерживать приложение Reducers и еще одну, чтобы держать подписчиков.
 
class Store{
    private state:{[key:string]:any}
    private reducers:{[key:string]:Function}
    private subscribers: Array;

    //...
}

 
Реализация
 
Конструктор
 
Вперед. Вы можете заметить, что я использую TypeScript, но не стесняйтесь использовать JavaScript. Наш первый шаг – написать метод конструктора, конструктор Нужно получить редукторы и начальные стадии, так что давайте сделаем это:
 
class Store{
    //...
    constructor(reducers={}, initialState={}){
        this.reducers = reducers
        this.state = initialState
    }
    //...
}

 
Здесь мы назначаем редукторы и Начальный стат к штат и Reducers характеристики.
 
Используй это:
 
    const reducers = {
        todoReducer:(state, action) => ({...})
    }

    const initialState = {
        todoReducer:{todos:[]}
    }

    const store = new Store(reducers, initialState)

 
Уменьшать
 
Как я упоминал ранее, READ выполнит и вернет изменение состояния.
 
class Store{
    //...
    private reduce(state, action) {
        const newState = {}
        for (const prop in this.reducers) {
        newState[prop] = this.reducers[prop](state[prop], action)
        }
        return newState
    }
}

 
Здесь мы итерационные восстановители, зарегистрированные в магазине, и вызываем каждого редуктора, проходящего в качестве аргумента, текущее состояние и текущее действие. После этого мы сохраняем результат, возвращаемый каждым редуктором в правильном свойстве штата. Наконец, мы возвращаемся в новое государство. Поскольку метод уменьшения является частным методом, он не будет доступен для использования из класса.
 
Подписывайся
 
Подписка позволит нам иметь много слушателей в государственном изменении, поэтому давайте реализуем его.
 
class Store{
    //...
    subscribe(fn:Function){
        this.subscribers = [...this.subscribers, fn];

        return () => {
            thi.subscribers = this.subscribers.filter(subscriber => subscriber !== fn)
        }
    }
}

 
Здесь мы получили функцию, которая будет вызвана, когда некоторые изменения произойдут в штате, подписчик Добавить fn аргумент в подписчики свойство. Последняя часть этого метода вернет еще одну функцию, которая при вызове удалит fn Функция принята как аргумент. Функция, которая будет возвращена, знает подписчик Метод контекст, по этой причине мы можем сравнить fn Аргумент с каждым абонентом, зарегистрированным в нашем магазине, и решайте, кого нужно удалить.
 
Используй это:
 
    //...
    const store = new Store(reducers, initialState)

    function callback(state){
        // do something
    }

    const unsubscribe = store.subscribe(callback)

    unsubscribe()// wii remove callback function

 
Отправлять
 
Давайте реализуем этот метод и узнаем, как он работает.
 
class Store{
    //...
    dispatch(action) {
        this.state = this.reduce(this.state, action)
        this.subscribers.forEach(fn => fn(this.state))
    }
}

 
Когда уменьшить Метод вызывается, он возвращает новое состояние и назначает его Государство Собственность магазина. После этого мы итерация подписчики Собственность и вызывает каждую подписанную функцию, передавая новое состояние в качестве аргумента, таким образом, каждый слушатель будет уведомлен с новым состоянием приложения.
 
Используй это:
 
//...
const store = new Store(reducers, initialState)

const action = {
    type:'ADD_TODO',
    payload: {label:'Push up', complete:false}
} 

store.dispatch(action)

 
Ценность
 
Нашей последней реализацией метода будет метод получения, который вернет нам текущее состояние, давайте реализуем его:
 
class Store{
    //...
  get value() {
    return this.state;
  }
}

 
Окончательный код
 
class Store {
  private subscribers: Function[]
  private reducers: { [key: string]: Function }
  private state: { [key: string]: any }

  constructor(reducers = {}, initialState = {}) {
    this.subscribers = []
    this.reducers = reducers
    this.state = this.reduce(initialState, {})
  }

  get value() {
    return this.state;
  }

  subscribe(fn) {
    this.subscribers = [...this.subscribers, fn]
    return () => {
      this.subscribers = this.subscribers.filter(subscriber => subscriber !== fn)
    }
  }

  dispatch(action) {
    this.state = this.reduce(this.state, action)
    this.subscribers.forEach(fn => fn(this.value))
  }

  private reduce(state, action) {
    const newState = {}
    for (const prop in this.reducers) {
      newState[prop] = this.reducers[prop](state[prop], action)
    }
    return newState
  }
}

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




Оригинал: “https://dev.to/jucian0/implementing-redux-pattern-1oj0”





Читайте ещё по теме: