Рубрика «redux»

Вступление

Модальные окна — один из самых недооценённых слоёв UI-архитектуры. Формы, подтверждения, панели действий — в любом крупном проекте их десятки. И почти в каждом проекте их управление со временем превращается в хаос.

Не потому что разработчики ленивые. А потому что модалки обманчиво просты. useState(false) — и готово. Пока модалка одна, в одном месте, с одним набором данных — проблем нет.

Проблемы начинаются, когда проект растёт:

  • Одна модалка нужна в десяти местах интерфейса — и в каждом месте свой <Modal /> с одними и теми же пропсами

  • Читать полностью »

Автор: Станислав Павенко
GitHub-репозиторий

💡 Необходимые навыки до начала изучения!

  • Уметь писать код на HTML/CSS;

  • Понимать, что такое шифрование данных и чем отличаются HTTP vs HTTPS;

  • Уметь писать компоненты на React и работать с хуками: useState, useEffect;

  • Использовать Redux Toolkit Query для REST-запросов.

Представьте, что вы смотрите онлайн-трансляцию матча. Счёт меняется — и вы видите это мгновенноЧитать полностью »

Две проблемы React-разработчика

У React-разработчика две беды:

  • Целевые данные изменились, а ререндера не произошло.

  • Целевые данные не изменились, а ререндер произошёл.

Есть много способов подружить данные с UI. В рамках этой статьи я пройдусь по популярным подходам: разберём, как устроены подпискиЧитать полностью »

Кадр из культового фильма "Идиотократия" о печальных трендах в современном обществе

Кадр из культового фильма "Идиотократия" о печальных трендах в современном обществе

Читать полностью »

Вступление лирическое

Представьте себе ситуацию: вы освоили всё необходимое для работы, успешно работаете, проходит год, другой, и вдруг осознаёте, что, живя в своём уютном информационном пузыре, до сих пор не знаете, когда проходит WWDC или на какой версии Swift вы пишете

Да, я оказалась именно в таком пузыре. Всё вроде бы шло хорошо: задачи решались, меня хвалили, и не было никакой необходимости узнавать что-то новое. Конечно, я всё же чему-то училась, но точечно, по мере необходимости

Читать полностью »

Дисклеймер

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

Откуда есть пошли SPA

Читать полностью »

Знакомство c Reatom - 1

Привет, меня зовут Артём Арутюнян и я автор менеджера состояния Reatom. Этим постом открывается серия обучающих материалов на русском языке, документация на английском доступна на официальном сайте.

А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.

В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.Читать полностью »

в 7:25, , рубрики: React, ReactJS, redux

Постановка задачи

Представьте: у вас есть таблица с данными, которые можно редактировать. Как мы это оформим?

В начале создадим наш проект через бойлерплейт утилиту npx create-react-app

В компоненте app.js получим список космических кораблей и положим их в хранилище redux (позднее будет понятно, почему именно туда):

// app.jsx

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const getNews = async () => {
      const {data} = await axios({
        method: `get`,
        url: `http://swapi.dev/api/vehicles`
      })

      dispatch(setStarships(data.results))
    }
    getNews();
  }, [])

  return (
    <div className="App">
      <Table />
    </div>
  );
}

Построим простую таблицу:

// table.jsx

const Table = () =>Читать полностью »

Тема, конечно, не нова, и немало на этот счет уже сказано и написано. Но все же поделюсь и своим взглядом на этот счет, т.к. мое осознание данного факта формировалось скорее независимо и на основании собственного опыта, ценностей и взглядов, и возможно (надеюсь) в нем читатель найдет для себя что-то свежее или полезное.

Flux - это вовсе не что-то новое либо революционное

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js