Первое знакомство с реакцией (2) Реализовать упрощенную демку html+redux.js

внешний интерфейс JavaScript React.js Redux

рассмотрение

предисловие

Прежде всего, чтобы исправить недоразумение, redux можно использовать с такими фреймворками, как jq, не ограничиваясь только реакцией. Чтобы всем было понятно, мы реализуем здесь только использование самой простой версии html+redux.js.

Почему появляется редукс

Из-за сложности одностраничных приложений трудно обмениваться состоянием между несколькими не связанными между собой компонентами.Появление Redux решает проблему данных.

Редукс дизайнерские идеи

  • Redux хранит все состояние приложения в одном месте, называемый магазином
  • Сохраняет дерево состояний дерево состояний
  • Компоненты могут отправлять действия отправки в хранилище вместо прямого уведомления других компонентов.
  • Другие компоненты могут обновлять свои представления, подписываясь на состояние в магазине.

Три принципа редукции

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

  • Состояние всего приложения хранится в хранилище, которое мы называем хранилищем, и у всего приложения может быть только одно хранилище.

состояние только для чтения

  • Единственный способ изменить состояние — это dispatch(action), то есть действие по отправке.

Используйте чистые функции для выполнения модификаций

  • Напишите редукторы с чистыми функциями для каждого действия, чтобы описать, как изменить состояние

Столько наговорил, не понял?Не важно, есть три понятия: состояние, редюсер и действие. Давайте объясним API один за другим

Анализ концепции

1. Склад магазина

  • redux предоставляет функцию createStore для создания магазина
  • Хранилище — это место, где хранятся данные, которое можно рассматривать как контейнер. Все приложение может иметь только один магазин
function createStore(reducer) { //将状态放到一个盒子里 别人改不了
    ...
}
let store = createStore(reducer)

2. Государство государство

Объект хранилища содержит все данные. Если вы хотите получить данные в определенный момент времени, вам необходимо создать снимок хранилища. Сбор данных в этот момент времени называется состоянием. Состояние на текущий момент можно получить через store.getState().

let state = store.getState()

3. действие действие

  • действие должно быть объектом, требуется тип, пользователи могут отправлять действия для изменения состояния.
let action = {
    type:"change_title_text",
    text:"改变标题了"
}

4. store.dispatch(action) действие отправки

  • store.dispatch() — единственный способ выполнить действие
let store = createStore(reducer);
store.dispatch(action)  //action=>{type:"change_title_text",text:"改变标题了"}

5. Администратор редуктора, также известный как обработчик

  • После того, как Store получит отправленное действие, то есть dispatch(action), он должен вернуть новое состояние, чтобы представление изменилось.
  • Этот процесс вычисления состояния называется Reducer, который представляет собой чистую функцию, которая принимает состояние и действие в качестве параметров и возвращает новое состояние.
let reducer = function(state,action){
    return new_state;
}

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

Шаги реализации счетчика (сокращение)

1. Объявить состояние инициализации

let initState = {number:0}

2. В центре внимания createStore

  • Создать склад, сохранить состояние, выставить текущее состояние => getState и как изменить состояние => диспетчеризация
let createStore=(reducer)=> { //将状态放到一个盒子里 别人改不了
    let state ;  //声明状态
    function dispatch(action) { //派发 参数是action动作,action是一个对象
       state= reducer(state,action); //调用写好的方法,这个方法会返回一个新的状态
    }
    dispatch({}); //内部需要先定义次
    let getState = ()=> JSON.parse(JSON.stringify(state)); //获取状态的方法 深拷贝
    return {
        getState,
        dispatch
    };
}
  • Вам нужно знать, что действие — это объект => {тип: «добавить», количество: 5}, тип — добавить, и каждый щелчок добавляет 5
  • При создании склада он по умолчанию вызывает сначала dispatch({}) и присваивает состояние по умолчанию состоянию
  • Открывайте метод getState извне, чтобы пользователи могли получить последнее состояние.
  • Выставляйте метод отправки извне, и пользователи могут отправлять действия

Когда вы не можете понять это, пока вы знаете, что есть только одна цель, вы назначаете значение по умолчанию в состояние. Первая отправка ({}) => Редуктор (состояние, действие). Вы можете назначить значение по умолчанию, чтобы понять, как, посмотрите вниз

3. Реализация редуктора

  • Администратор, может возвращать разные статусы в зависимости от типа
let reducer=(state=initState,action)=> { //管理员,负责如何更改状态的
    switch (action.type) { //更改状态 要有一个新的状态覆盖掉
        case "add":
            return {number:state.number+action.count}
    }
    return state;
};

Ладно, пока разберемся с идеями

  • Будем вызывать let store = createStore(reducer) вот так, что тут происходит, как присвоить начальное состояние состоянию
  • Шаг отправки ({}) => редуктор (initState, действие) => состояние = initState

4. Верните вид страницы в начальное состояние.

let store = createStore(reducer);
function render() {
    let content = document.querySelector('.content');
    content.innerHTML = store.getState().getState().number;
}
render();
  • Привязать просмотр страницы к состоянию в магазине. увидеть эффект

Пока все идеально, так как же мы нажимаем кнопку для изменения состояния, только через метод store.dispatch()

5. Нажмите, чтобы изменить представление

btn.onclick = function () {
    store.dispatch({type:"add",count:5});
    render()
}

До сих пор было реализовано одно из самых простых приложений с редукцией. На самом деле, редукс относительно прост. Ключ в том, чтобы понять его концепцию. Я объясню, как использовать редукцию в реакции позже.

Категории