Я думаю, что вам нужно сначала понять цикл Redux, который выглядит следующим образом:
Action Creator-> Action-> dispatch-> Reducers-> State
Создатель действия - это функция, которая возвращает простой объект JavaScript, называемый действием.Действие будет иметь type и payload, которые предоставляют контекст того, что он делает, например, при создании страхового полиса, это будет выглядеть так:
// People dropping off a form (Action Creator)
const createPolicy = (name, amount) => {
return { // Action(a form in this analogy)
type: 'CREATE_POLICY',
payload: {
name: name,
amount: amount
}
};
};
Все создатели действия выглядят идентично тому, чтовы видите, что здесь с небольшим разбросом.
Но я знаю, что вопрос заключается не столько в синтаксисе, сколько в понимании цикла и их целей.
Итак, вы хотите понять, какую роль нужны создателям ваших действий.играть в своем приложении React, а затем на ваших редукторах и выяснить их роль, но на самом деле после того, как вы выяснили сложную часть, создателей действий, остальные начинают становиться на свои места.
The dispatch получает действие и рассылает его всем различным Reducers.dispatch является частью самой библиотеки Redux, так что вам не нужно выписывать ее и задавать вопрос о mapStateToProps, если вы связываете его с компонентом более высокого порядка с помощью помощника connect(), весь этот процесс похож на руководствопереопределение процесса отправки.
Идея Редукторов заключается в том, что мы выписываем функции, и каждая из них моделирует свое поведение внутри приложения.Каждый редуктор вызывается с действием, редуктор проверяет действие и определяет, следует ли изменить поведение на основе этого действия.
Таким образом, создатели действия похожи на людей, подающих страховую заявку, а действие является действительной претензией.Эти претензии поступают в эти различные отделы, называемые редукторами.
Таким образом, если придерживаться этой аналогии страховых требований, то редуктор, который я, возможно, захочу создать, будет представлять собой редуктор истории исков, например:Таким образом, задача редукторов состоит в том, чтобы определить, заботится ли он о типе действия, которое он получает.Если он имеет значение type createClaim, то мы хотим убедиться, что код внутри функции извлекает свойство полезной нагрузки и добавляет его в список заявок, если нет, то возвращает список заявок без изменений, и это будет выглядеть так:
// Reducers (Departments)
const claimsHistory = (oldListOfClaims, action) => {
if(action.type === 'CREATE_CLAIM') {
// we care about the action (claim)
return [...oldListOfClaims, action.payload]
}
// we dont care about the action (form)
};
Так что я просто использую синтаксис ES2015, который берет массив, берет все записи и добавляет их в новый массив и добавляет новую запись action.payload.
Егоэквивалент const numbers = [1,2,3], а затем [...numbers, 4], который выдает: (4) [1, 2, 3, 4]
или эквивалент oldListOfClaims.push(action.payload);, но между этим и тем, что я использовал, есть четкая разница.
В синтаксисе, который я использовал для редуктора, я создаю новый массив и добавляю в него записи, тогда как метод push() модифицирует существующий массив.
Мы всегда хотим избегатьизменение существующих структур данных внутри редуктора.Вы никогда не увидите push() внутри редуктора.
Тогда есть случай, когда мы не заботимся о действии:
// Reducers (Departments)
const claimsHistory = (oldListOfClaims, action) => {
if(action.type === 'CREATE_CLAIM') {
// we care about the action (claim)
return [...oldListOfClaims, action.payload]
}
// we dont care about the action (form)
return oldListOfClaims;
};
Далее, вам нужно разобраться со случаем, когдав самый первый раз, когда вызывается редуктор, данные для него не передаются.По сути, мы получим значение undefined.Нам нужно установить значение по умолчанию для первого аргумента.
// Reducers (Departments)
const claimsHistory = (oldListOfClaims = [], action) => {
if(action.type === 'CREATE_CLAIM') {
// we care about the action (claim)
return [...oldListOfClaims, action.payload]
}
// we dont care about the action (form)
return oldListOfClaims;
};
Таким образом, undefined был заменен пустым массивом.
Таким образом, выяснение ваших действий и редукторов является сложной частью при реализацииRedux, а также соответствующие ему тонкие правила зерна, например, убедитесь, что вы не изменяете передаваемый массив, и всегда возвращаете какое-либо значение.
Общая цель редуктора - взятьнекоторые существующие данные передаются ему как действие и находят и возвращают эти существующие данные на основе содержимого действия.
Так что это все базовые вещи, с которых можно начать.Из всего этого вам нужно вернуть новый экземпляр магазина Redux.
В зависимости от вашего проекта у вас может быть от 1 до 3 или более создателей действий и редукторов.Затем вы соединяете все это в один объект, называемый хранилищем, который представляет собой просто набор различных действий и редукторов.
Итак, где-то в ваших компонентах вы добавите что-то вроде этого: const { createStore, combineReducer } = Redux;
Вот как выглядит combineReducers:
const ourDepartments = combineReducers({
accounting: accounting,
claimsHistory: claimsHistory,
policies: policies
});
Затем вы завершаете создание своего магазина следующим образом:
const store = createStore(ourDepartments);
store;
store представляет все приложение Redux,Он содержит ссылки на все ваши разные редукторы и на все ваше состояние, созданное этими редукторами или данными.
Объект store имеет некоторые полезные функции, такие как функция dispatch.Чтобы вызвать dispatch(), мы должны передать действие, созданное создателем действия, а затем передать его store.dispatch().
const store = createStore(ourDepartments);
const action = createPolicy('Alejandra', 35);
console.log(action);
store.dispatch();
Когда вы выйдете из консоли action, вы должны увидеть васиметь тип действия и полезную нагрузку:
{type: "CREATE_POLICY", payload: {…}}
Затем вы выполняете это действие и передаете его store.dispatch() примерно так:
До сих пор вы, вероятно, видели ошибку, говорящую, что действие должнобудь простым объектом JavaScript и т. д., эта ошибка исчезнет, как только вы передадите действие следующим образом:
store.dispatch(action);
Вы можете проверить, чтобы увидеть состояние приложения, распечатанного так:
console.log(store.getState());
{бухгалтерия: 135, претензийИстория: Массив (0), политик: Массив (1)} бухгалтерия: 135 претензийИстория: [] политики: ["Алехандра"] прото : Объект
Теперь вы можете начать передавать такие действия следующим образом:
store.dispatch(createPolicy('Alejandra', 35));
store.dispatch(createPolicy('Ben', 20));
store.dispatch(createPolicy('Daniel', 78));
store.dispatch(createClaim('Alejandra', 120));
store.dispatch(createClaim('Ben', 50));
store.dispatch(deletePolicy('Daniel'));
console.log(store.getState());
Вывод на консоль:
{accounting: 63, Applications История: Array (2),полисы: Array (2)} учет: 63 заявокИстория: Array (2) 0: {name: "Alejandra", amountOfMoneyToCollect: 120} 1: {name: "Ben", amountOfMoneyToCollect: 50} длина: 2 proto : политики Array (0): Array (2) 0: "Alejandra" 1: длина "Ben": 2 proto : Array (0) proto : Object
Вот так работает библиотека Redux
Хорошо, так что я показал вам, как этоработает сам по себе, но как две библиотеки, Redux и React, взаимодействуют друг с другом?
Так что да, с реализацией Redux мы используем состояние уровня компонента гораздо реже.Вместо этого мы обычно храним все наши данные внутри Redux.
В некоторых сценариях мы хотим иметь состояние внутри компонентов Redux и React, но в целом все ваше состояние внутри приложения React теперь находится внутриВместо этого следует использовать Redux, что превращает его в гораздо более простое приложение React.
Допустим, у вас есть какое-то приложение типа iTunes, как бы мы собрали его только с Reactjs?
Так что это будетваше приложение без приставки:
Так что здесь SongDetail нужно знать только, какая песня выбрана в данный момент.Таким образом, ваш App компонент передает его в SongDetail в качестве реквизита, а SongDetail выводит его на экран.
С одним только React это будет простым и понятным приложением.
Так как ваше приложение меняется с Redux?
Так же, как и раньше, у нас будет компонент App,SongList и SongDetail, но компонент App будет передавать очень мало информации по SongList и SongDetail.
Вместо этого мы собираемся абстрагировать эти идеисоздание списка песен и выбор песни и того, какая песня в данный момент выбрана, в приложение для редукса.
Таким образом, у вас будет редуктор, который будет генерировать список песен, и редуктор, который будет записывать, какая песня выбрана в данный момент.является.Это две части состояния в вашем приложении.
Наконец, мы хотим убедиться, что у нас есть создатель действий, чтобы каким-то образом изменить ваше состояние.Это единственный способ изменить свое состояние в приложении-избыточности.
Таким образом, создатель ваших действий может называться select song, который отправит действие и скажет выбранному редуктору песни обновить свои данные и отобразить новую выбранную в данный момент песню.
Так что это ваше приложение с Redux.