Действия для моего ресурса закладки
Сегодня я буду объяснять свои действия/bookmarks.
Я использую действия, чтобы изобразить функциональность CRUD, приносить запросы на мой бэкэнд API Rails и разрешение или отклонение обещаний извлечения.
🌱☁ ️ Это действительно для меня, но если вы хотите прочитать, иди, присоединяйтесь ко мне! ☁ 🌱
Действия
Действия – это объекты JavaScript, которые рассказывают нам, как и/или что мы хотим изменить в государство. Поскольку это объект JavaScript, действие будет иметь пары ключей в качестве свойств. В частности, для действия, чтобы выполнить свою работу, оно должно иметь свойство «типа» и свойство «полезной нагрузки». (Свойство полезной нагрузки может выполнять любое имя; например, «лицо» или «данные».)
Простым примером объекта действия является:
const addTodo = {
type: 'ADD_TODO',
payload: 'Buy milk'
}
У нас есть наш объект действия «AddTodo», и он имеет свойство типа «add_todo» и свойство полезной нагрузки «купить молоко». Это ясно описывает, как и что он хочет изменить в государство; Действие хочет добавить TODO с данными «купить молоко». Хотя это простой пример, действия могут стать очень сложными. Например, действие может быть вложенным объектом:
const addTodo = {
type: 'ADD_TODO',
payload: {
todo_name:'Buy milk',
category: 'Groceries',
completed: false
}
}
У нас есть объект полезной нагрузки внутри объекта действия. Это может продолжаться для многих уровней, поскольку мы знаем, что данные отражают сложность приложения.
По мере того, как возникает сложность, Redux представил концепцию «создателей действий». Создатели действий – это функции JS, которые возвращают объект действия. Его основная цель – связать наш объект действия с отправкой. Dispatch принимает объект действия и передает его редуктору, чтобы призвать редуктора, чтобы внести изменения и вернуть новое состояние. Привязывая наши действия для отправки, мы можем в конечном итоге подключить или преобразовать наши действия с нашими редукторами, чтобы внести изменения.
Я использовал создателей действий в своих действиях/bookmarks.
☁ ️Let Взгляните на какой -то код! ☁☁ ️
// actions/bookmarks.js
import { CREATE_BOOKMARK, GET_BOOKMARKS, DELETE_BOOKMARK, FAVORITE_BOOKMARK, ERROR, LOADING_BOOKMARKS, UPDATE_QUERY } from './types'
import { getToken } from './users'
// actions/users.js
export function getToken() {
return localStorage.getItem("token")
}
Выше я импортировал свои типы действий из папки типов, которую я создал, чтобы хранить их все. Как мы теперь знаем, тип действия-это первая пара ключевых значений объекта действия и необходимый для цели действия.
Я также импортирую функцию «GetToken» из моего файла actions/users.js, потому что у меня есть аутентификация разработки JWT. Я также перечислил функцию выше только для справки.
export function createBookmark(data){
return (dispatch) => {
dispatch({ type: LOADING_BOOKMARKS})
fetch('http://localhost:3000/bookmarks', {
method: "post",
headers: {
"Content-Type": "application/json",
Authorization: getToken()
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
response.json().then(json => {
dispatch({type: CREATE_BOOKMARK, payload: json})
})
} else {
return response.json().then((json) => {
return Promise.reject(json)
})
}
})
.catch(error => {
dispatch({type: ERROR, payload: error})
})
}
}
Мой первый создатель действий – это функция, называемая «CreateBookmark». Он принимает аргумент данных (который отражает ввод из формы закладки на фронте). Я инициирую оператор возврата, который проходит в диспетчерию, чтобы использоваться с объектами действия в моем операторе возврата. Сначала я отправляю действие «Загрузка_Bookmarks». Это говорит мне, что мой магазин Redux загружает текущие закладки моего текущего пользователя, и тогда я вижу, что действие происходит в моих Devtools Redux. Это точка организации для меня; Он дает мне знать, что происходит в магазине.
Затем я отправляю запрос на получение «Localhost: 3000/закладки». Поскольку я создаю закладку, мне нужно опубликовать свои данные о том, чтобы «/закладки», как будто мое обещание разрешено, новая закладка будет добавлена в объект закладок в моей бэкэнде. В Fetch я использую метод «Post», чтобы сказать, что я добавляю что -то. Я использую заголовки, чтобы принять контент-тип JSON, так как мой объект бэкэнд закладок сериализован и написан в JSON. Мой второй заголовок “Авторизация: getToken ()” затрагивает мою аутентификацию пользователя. Я использую импортную функцию «getToken ()», чтобы сказать, что хочу связать эту созданную закладку с моим текущим пользователем, отраженным токеном.
Чтобы закончить мой запрос на получение запроса, я использую метод json.stringify () для преобразования объекта или значения JavaScript в строку JSON И я передаю это данные. Я использую серию методов экземпляра обещания ».Then ()« чтобы проверить, является ли ответ «ОК» и разрешено ли обещание. Если это так, я беру JSON из ответа и использую его в качестве значения моего ключа полезной нагрузки, который будет отправлен на мой объект действия “create_bookmark”. Если ответ не в порядке, обещание отвергается.
** Примечание по обещаниям: Обещание начинается как ожидающее, и его значение результата не определено. Выполненным обещанием является «разрешенное» и приводит к значению (полезной нагрузке) и успешному обратному обращению. Между тем, отклоненное (или неудачное) обещание приводит к ошибке, которая обычно является отказом. Эти три статуса обещания: выполнены, ожидают и отклонены, определяют поведение и результат запроса на выброс. * *
Только если обещание отклоняется, это метод экземпляра .catch (), который призван и отправляет объект действия по ошибке.
Давайте посмотрим на другого создателя действий:
export function favoriteBookmark(id, favorite){
return(dispatch, getState) => {
const bookmark = getState().bookmarks.bookmarks.find(bookmark => bookmark.id === id)
const data = {
headline: bookmark.headline,
web_url: bookmark.web_url,
description: bookmark.description,
id: id,
favorite: favorite
}
const configObject = {
method: "PATCH",
headers: {
"Content-Type": "application/json",
Accepts: 'application/json',
Authorization: getToken()
},
body: JSON.stringify(data)
}
fetch(`http://localhost:3000/bookmarks/${id}`, configObject)
.then(response => {
if (response.ok) {
response.json().then(json => {
dispatch({type: FAVORITE_BOOKMARK, payload: json})
})
} else {
return response.json().then((json) => {
return Promise.reject(json)
})
}
})
.catch(error => {
dispatch({type: ERROR, payload: error})
})
}
}
Этот создатель действий, «Facebookmark», принимает два (2) аргументы: «id» и «Favorite». Я также инициирую оператор возврата с двумя (2) аргументами: «Dispatch» и «GetState». Мы уже узнали о отправке, так что же GetState? GetState – это функция, предоставленная нам из магазина Redux. Он возвращает текущее состояние моего заявления. Используя GetState, я ищу текущее состояние данных моих закладок и использую метод поиска, чтобы проверить, соответствует ли идентификатор, который я передал нашему создателю действия, идентификатор закладки, которую я пытаюсь любить. Я установил это значение для постоянной «закладки».
Я объявляю и назначаю еще одну постоянную «данных» атрибутам закладки, которые я пытаюсь любить. Поскольку атрибуты «Заголовок», «Web_url» и «Description» моей закладки не будут изменены, я установил их на их текущее значение. Я назначаю атрибуты «ID» и «любимый» параметрам, которые я передал нашему создателю действия.
Я при желании создал еще один постоянный «ConficeObject», чтобы объявить свой метод «патч» (поскольку я обновляю уже существующую закладку), мои заголовки (включая авторизацию) и свое тело, которое я передаю свои данные постоянной, чтобы обращаться в строку JSON из Json объект.
Я передаю свой ConficeObject в свой запрос Fetch и указываю атрибут «ID» закладки, которую я пытаюсь любить в своей конечной точке Localhost. Подобно моему создателю Action CreateBookmark, я проверяю, в порядке ли ответ, и отправляю свой объект действия с полезной нагрузкой JSON. Если мой ответ не в порядке, мое обещание отклоняется, и я отправляю объект действия ошибки в моем методе экземпляра .catch ().
🌱🌱 🌱 🌱 🌱
Опять же, это только для моего собственного развлечения + обучения. Тем не менее, если вы обнаружите, что читаете это, и вы хотите что -то предложить, задать вопрос или продолжить обсуждение, пожалуйста, не стесняйтесь!
Оригинал: “https://dev.to/am20dipi/for-myself-explaining-actions-4f8d”