Простой для понимания Redux для понимания

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

Ключевые моменты этой статьи:

action
- Настроить поведение
- store.dispatch(action)
reducer
- чистая функция
- вернуть новое состояние
- createStore(reducer)
store
- getStore
- dispatch
- subscribe
combineReducers

Репозиторий кода для этой статьи, в этой папке.

Чтобы быть разумным, я буду использовать импорт и экспорт для изучения Redux, но некоторые узлы es6 не поддерживают его.Для простой демонстрации я буду использовать requre и module.exports для демонстрации. (В противном случае я должен объяснить очки знаний о преобразовании вавилона es6)

Прежде чем мы начнем, должны ли мы установить редукцию, прежде чем мы сможем начать веселиться.

npm install --save redux

Действие и редьюсер — хорошие друзья

Создавайте глобальное управление данными приложений с помощью ReduxstoreПрежде нам нужно создать два типа файлов JS, один из которыхactionодинreducer, я лично думаю, что эти два типа функций легко спутать. Я не знаю, какой из них что делает, и я часто забываю его использовать. Тогда я могу судить об их использовании только по их конкретному значению, а не по механическому заучиванию (эй, я стар и память у меня нехорошая, я могу вспомнить это только через понимание).

Действие, которое умеет только планировать задачи

Сначала посмотримaction, я думаю, что все знают это слово. Когда режиссер снимает, он любит говоритьaction!, это имеет как значение действия, так и значение начала, В Redux это означает начало действия. То есть действие активное, а не пассивное. Режиссер сказал начинать, надо начинать, и надо следовать сценарию, все четко устроено. Поэтому действие Redux — это инструкция, говорящая магазину, я хочу сделать это дело, ты его оформляешь. Иногда нам нужно прикрепить какой-то контент к магазину, прежде чем мы сможем перейти к следующему шагу, в этот раз нам нужно, чтобы действие содержало стандартные параметры.

Итак, как мы пишем действия? Содержит два пункта:

регистрационный акт
Параметры регистрации поведения

Регистрация поведения, планирование поведения, стандартизация инструкций для каждого поведения

const todo={
  TOGGLE_TODO:'TOGGLE_TODO',
  GET_TODOS:'GET_TODOS'
}

Все параметры и стандартизированные параметры, внесенные поведением конфигурации, передаются на полосу, чтобы не возвращаться. вtypeЭто тип поведения, он должен быть, как в некоторых офисах нужно приносить дверную карту, если вы ее забудете, до новых встреч! Чтобы вызвать охрану. заднийitemОн настраивается, смотрите, какие параметры нужны вашей операции, привозите, если нужно, не привозите, если не нужно, будет очень громоздко.

const todo={
  TOGGLE_TODO:'TOGGLE_TODO',
  GET_TODOS:'GET_TODOS',
  toggleTodo:function ({ items,id }) {
    return {
      type: todo.TOGGLE_TODO,
      items:items
      id:id
    }
  },
  getTodos: function getTodos({items}){
    return {
      type:todo.GET_TODOS,
      items:items
    }
  }
}
module.exports=todo

Действие просто сообщает вам, что произошло, и дает вам параметры, но оно не выполняется и не вносит изменений в переданный объект (состояние).*

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

чистый редуктор

Теперь разберем самое непонятноеreducer, зачем он позвонилreducer, есть ли какой-то конкретный смысл? Это по-прежнему случайное имя, всегда есть причина, как и имя, которое дали нам мои родители, всегда есть хорошие ожидания.

reducerЕсть много значений, и это слово используется во многих областях, но в Redux это должно быть函数式语言(functional languages)концепция в . В вики это обычно называетсяFold, как средство структурных преобразований.

Нас не волнует реализация Reducer на других языках, мы смотрим только на JS, который появляется в JS.array.reduce(func,initval), я считаю, что все должны быть знакомы с этим, и это также метод, который заставляет вас плакать, как только вы начинаете. в массивеreduceКаковы характеристики (друзья, которые не умеют использовать сокращение,кликните сюда):

дает инициалinitval
имеет преобразованныйfuncметод, этот метод должен быть чистой функцией, не изменяющей свойства входящего объекта
в конечном итоге возвращает новый объект/значение, аarrayпостоянный.

Таким образом, можно сделать вывод, что в Reduxreducerспециальность:

Требуется начальное значение, которое является начальным значением в редуксе.state
Существует метод преобразования, этот метод должен быть чистой функцией
Наконец, возвращается новый объект, то есть новое состояние, в то время как входящее состояние остается неизменным.

вы можете быть правы纯函数(pure funciton)Это немного нечетко, может функция чистая? ? Думали, это чистое молоко? ? Чистый здесь означает, что он чист и свободен от примесей. То есть два момента:

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

Если вы хотите узнать больше об этом, положите руки на викиСвязь.

Итак, как мы это пишем?

Давайте рассмотрим приведенные выше действия. Редюсеры — хорошие братья по сопоставлению действий.Одно впереди, а другое сзади.

Редуктор выполняется не активно, а пассивно, приходит действие, а потом редьюсер его обрабатывает.

Вкратце: редьюсер отвечает на вызов действия и возвращает новый объект (состояние).

Сначала импортируйте поведение из действия, которое является зарегистрированным и исполняемым.

const {TOGGLE_TODO,GET_TODOS}=require('../actions/Todo')

Определение редьюсера заключается в том, что должно быть начальное значение, и установка его здесь на всякий случай.

const initialState={}

Суть в том, что редюсер начинает фильтровать зарегистрированные поведения, а потом каждый раз спаривается по одному, встречая пару, выполняет соответствующий код, а потом возвращает новый.state, если выяснится, что это незарегистрированное поведение, то для того, чтобы это поведение не было труднообъяснимым, исходноеstateВозьми его обратно по делам.

module.exports=function(state = initialState, action) {
    switch(action.type){
        case GET_TODOS:
            return {todos:[...action.items]}
        case TOGGLE_TODO://deleted=true
            return {
                todos:action.items.map((i)=>{
                    if(i.id===action.id){
                        return {
                            ...i,
                            status:i.status===0?1:0
                        }
                    }else{
                        return {
                            ...i
                        } 
                    }
                })
            }
        default:
            return state;
    }
}

Редюсер выполняет ряд операций согласно инструкции действия, но не изменяет исходный входящий объект (состояние), а возвращает новый объект (состояние). То есть Reducer, который выполняет чистый расчет, без асинхронности, без загрязнения, без случайного значения, так же как 1+1 должен быть равен 2, а потом возвращает совершенно новый объект (состояние)!

встретиться с боссом магазин

Хотя действие и редуктор представляют собой пару базовых элементов и негласно взаимодействуют между собой, они являются двумя независимыми модулями, и для того, чтобы связать их, требуется мост. Этоstore, настоящий босс в Redux, каждый должен использовать хранилище для выполнения следующей человеческой задачи и подчиняться задачам, отправляемым хранилищем.

Сначала настроим босса,todoDemoListЭто поддельные данные, все знают, что они для тестирования. Боссу нужны только редукторы, чтобы построить бандуcreateStore. Действия бесполезны в начале банды.

const {createStore}= require('../../node_modules/redux')
const todo = require('./reducers/Todo')
const {toggleTodo,getTodos} = require('./actions/Todo')

let todoDemoList=(new Array(20)).join("|").split("|").map((v,i)=>{
    return {id:i,content:"demo"+(i+1),status:i%4===0?1:0}
})

const store=createStore(todo)

Как наш магазин может стоять?

Контролируйте данные всего приложенияstate,конечно начальник контролирует ситуацию в целом,от него нечего скрывать
Если вы хотите получить доступ к данным приложенияstate, то вам нужно обратиться в магазин, это приложение естьgetState()

console.log(store.getState())//打印出来是一个空的{}，当然啦！我们都没有给老大进贡，拿来的数据

Если вы хотите изменить данные, вы должны обратиться к боссу, т.е.dispatch(你的申请action). действие, наконец, здесь!

store.dispatch(getTodos({items:todoDemoList}))//给老大进贡
console.log(store.getState().todos[1])//有数据了
store.dispatch(toggleTodo({items:todoDemoList,id:1}))//修改某一个小罗罗
console.log(store.getState().todos[1])//修改成功

Не думайте, что вы можете делать все, что хотите, когда вы его модифицируете, босс наблюдает. пропуск боссаsubscribe(监视器listener)Посмотрите на вас, позвольте мне обратить внимание на образец. Но на данный момент важно отметить, что мы собираемся поместить слушателя во всеdispatchДо казни, иначе не будет захваченdispatch. Будьте готовы до того, как все произойдет, иначе вам придется использовать лазейки для демо. Так же, как и воровство, вор уже закончил воровать, и вы не сможете поймать вора, если установите слежку.

store.subscribe(()=>{
    console.log(store.getState())//监控这手下的一举一动
})

Начальник не злой человек, если вы скажете, что ваша работа достаточно хороша, вы все равно отмените слежку. Способ отменить этоstore.subscribe()Возвращаемое значение метода, это возвращаемое значение похоже на этоstore.subscribe()()

let unsubscribe=store.subscribe(()=>{
    console.log(store.getState())//监控这手下的一举一动
})
store.dispatch(toggleTodo({items:todoDemoList,id:1}))//老大在watching，小心翼翼。
unsubscribe()//放了你们，出去浪吧
store.dispatch(toggleTodo({items:todoDemoList,id:1}))//居然真的没有再继续监视我了，放飞自我。

Как у босса может быть только один младший брат-редуктор? Конечно их много!`combineReducers(小弟们)`

Банда может иметь только одного босса! Но младших братьев может быть много, и каждый младший брат выполняет свои обязанности. Но чтобы управлять этими младшими братьями единым образом, на этот раз нам нужно использоватьcombineReducers.

Таким же образом создайтеfilterAction, затем используйтеcombineReducersНа мгновение вы можете счастливо сотрудничать.

...
const filterAction = require('./reducers/filterAction')
const {showCompleted} = require('./actions/filterAction')
...
const rootReducer = combineReducers({todo: todo, filterAction: filterAction})
....
store.dispatch(showCompleted({items:todoDemoList}))//success执行啦！

Действие и редьюсер — хорошие друзья

Действие, которое умеет только планировать задачи

чистый редуктор

встретиться с боссом магазин

Как у босса может быть только один младший брат-редуктор? Конечно их много!combineReducers(小弟们)

Как у босса может быть только один младший брат-редуктор? Конечно их много!`combineReducers(小弟们)`