Ответы пользователя по тегу Redux
  • Как вернуть продукт обратно, изменив количество?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Создаете экшен:
    const removeFromCart = productId => ({
      type: types.REMOVE_FROM_CART,
      productId
    })


    затем в редьюсере корзины, делаете так, чтобы на это действие был свой case, и в нем чтобы возвращался новый массив addedIds в котором уже не будет id из вашего экшена если quantityById меньше единицы (то есть, данной позиции больше не должно быть в корзине), либо изменяете quantityById ... суть в том, чтобы вы вернули новое состояние.

    так же, для редьюсера товаров вы делаете кейс на этот же экшен - и там так же по id находите и добавляете новый элемент.

    В общем, я думаю тут дело не сколько в реализации кода, а в понимании что такое экшены и редьюсеры. Почитайте в учебнике (на русском), поделайте пример и я думаю без проблем разберетесь с вашим вопросом.
    Ответ написан
    Комментировать
  • Как реализовать компонент "Сохранить"?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    вариант "при клике на like я меняю false на true самой карточки товара" - ОК (имеется ввиду, вы меняете одно из свойств в объекте с данными об этом объявлении, например: isFavourite: true)

    В реальном приложении еще запрос улетает на сервер, что клиент такой-то отметил такой-то объект в избранное.
    Ответ написан
  • Почему вываливается Actions must be plain objects. Use custom middleware for async actions если мидл подключен?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    const selectCountry = (country: any): any => {
      console.log(country);
      return {
         type: 'MY_TEST_ACTION',
      }
    };


    если используете короткую запись, то console.log не добавить. Не забывайте про type
    const selectCountry = (country: any): any => ({ // добавилось (
      type: 'MY_TEST_ACTION',
    }); // добавилось )


    ну и собственно проблема: текст ошибки после перевода: экшен должен быть объектом. У вас было undefined, так как не было return { }
    Так же у экшена, обязательно должно быть поле type
    Ответ написан
    2 комментария
  • Как деплоить проект написанный на reactjs?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Добрый день. Переносите бэкэнд на express на хостинг и запускаете. Так же переносите клиентский код на хостинг и запускаете.
    Если у вас сразу и клиент и сервер в одном проекте - то посмотрите, что у вас разное локально и на хостинге.

    google по поводу деплоя на heroku
    Ответ написан
    Комментировать
  • Как практиковать react, redux, router?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Попробуйте решить эти тестовые задания
    Ответ написан
    Комментировать
  • Тестирование React Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1 - да стоит тестировать каждый action, reducer (юнит-тесты) и какие-то моменты из компонентов (так как для всего компонента можно сделать снапшот + точечно покрыть желаемые места юнит тестами). Все функции, которые у вас в utils/helpers (вспомогательные) - тоже нужно покрывать юнит-тестами.

    2 - По туториалам для unit-тестирования:
    a) тестирование логики (экшены/редьюсеры)
    б) тестирование компонентов (включая снапшоты)

    3) Jest, enzyme. Пробовал (и тоже неплохо) - mocha, chai. Для e2e использовали puppetter, интересным выглядит cypress. Для тестирования саг юнит тестами - либо по доке, либо с помощью redux-saga-test-plan
    Ответ написан
    Комментировать
  • Как вы решаете проблемы производительности React/Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Как вам правильно подсказали в комментарии - нужно профилировать.
    Для этого загружаетесь с панелью разработчика, нажимаете Profile и смотреть где у вас проблемы.

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

    Использование shouldComponentUpdate - один из самых распространенных и действенных способов.

    По вопросу: стало тормозить React/Redux-приложение - добавляйте больше конкретики, будет видно. Все индивидуально, но обычно самые простые советы - использовать SCU, дробить на мелкие компоненты, дробить данные для редьюсеров (не хранить все в одном большом), использовать селекторы, минимизировать выполнение трудных расчетов (может у вас где-то банально "тяжелая" функция постоянно пересчитывает результат, а это не нужно)

    p.s. неплохая статья на EN - https://medium.com/@alexandereardon/dragging-react...
    Ответ написан
    Комментировать
  • Что посоветуете для реализации локализации в прилежнии на react+redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Я делал с помощью react-intl

    Также популярный - react-i18next
    Ответ написан
    Комментировать
  • Как создать фильтр товаров на react, если фильтр и товары выводястя в разных компонентах?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вам нужно хранить состояние фильтров в редьюсере (или редьюсерах), и затем в компонентах подписываться на эти "кусочки" с помощью mapStateToProps. Вот и все)

    Суть Redux как раз в том, что у вас есть единое состояние всего вашего проекта, и где бы вы ни были (через роутер или без) - вы можете просто приконнкектиться к стору (connect) и вытащить нужные данные через mapStateToProps
    Ответ написан
    8 комментариев
  • Как работает applyMiddleware?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Что именно непонятно, как работает ()() ?
    Такая запись понятна?
    function sum(x) {
       return function(y) {
        return x+y
      }
    }
    
    sum(1)(2) // 3
    sum(1) // Function


    В документации посмотрите на:
    - Arguments
    - Returns

    promiseMiddleware получает в качестве аргументов dispatch и getState (хоть это и не прописано явно, типа promiseMiddleware(dispatch, getState)).

    applyMiddleware(promiseMiddleware) - возвращает функцию, поэтому можно вызвать (скобочки) ее, куда передается createStore аргумент, который импортирован выше из библиотеки redux.
    Ответ написан
    5 комментариев
  • Что востребованней для react/ redux: redux saga или redux-thunk?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Нет такой статистики, но проектов на redux-thunk значительно больше.
    Да и сравнение не совсем корректное.
    Плюс речь вашего друга по поводу трендов - тоже такой себе аргумент.

    "типа проект сделаю и технологию изучу" - подход хороший, если уверены в своих силах.
    Ответ написан
  • Как валидировать ответы от API в redux (в частности react native)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Начну с конца:

    3) можно сделать функцию helper, типа check status
    приведу пример кода из старого проекта (не async / await, но не суть)
    export function checkStatus(response) {
      let json = response.json() // http://stackoverflow.com/a/29475662/1916578
    
      if (response.status >= 200 && response.status < 300) {
        return json
      } else {
        return json.then(window.Promise.reject.bind(window.Promise))
      }
    }
    
    export function httpGet(url) {
      return fetch(url, {
        headers: buildHeaders(),
      })
      .then(checkStatus)
    }


    и уже везде пользоваться httpGet для гетов, например. Конечно, можно расширить пример как вам нужно с необходимыми диспатчами и тд тп.

    2) проверять необходимо всегда, чтобы пользователь понимал что происходит:
    - вероятно у вас отпал инет
    - на сервере ошибка, попробуйте еще раз

    Думаю, стоит это начинать делать в catch у каждого запроса

    1) если API не ваше - то делайте проверки, какие посчитаете нужными

    Если API ваше, то проверки тоже необходимо делать, но в основном это нужно для обработки ошибок от сервера/сети.
    Ответ написан
    Комментировать
  • Как тестировать асинхронные action в Redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Redux-thunk отлично тестируется (документация).

    Суть в том, что вам нужно протестировать ожидание: в store случилось столько-то действий, с такими-то данными и типами (что вы и делаете для Request + Error), у вас не хватает мока для запроса на сервер.

    Здесь есть текст и видео "тестирование redux экшенов и редьюсеров" с подробностями, если не очень нравится пример из документации.

    Пример теста логина из второго тестового задания.
    Ответ написан
    Комментировать
  • Куда выносить логику запросов на сервер в React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Все роуты в массив - https://github.com/artbocha/react-redux-reactRoute...
    и затем по нему просто пробежаться - https://github.com/artbocha/react-redux-reactRoute...

    Запросы к серверу- в actions
    Ответ написан
    Комментировать
  • Специфика работы редюсера?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Набросал пример, экшен отдельно выносить не стал, думаю это не смутит.

    Перерендер произойдет - https://codesandbox.io/s/m43v2pmxj9
    (по клику на кнпоку происходит console.log 'render')

    p.s. следовательно, если у вас не работает - то либо где-то ошиблись в подписке (в mapStateToProps), либо где-то еще. Сделайте так же пример на codesandbox, разберемся.
    Ответ написан
    Комментировать
  • Изучение React.js и Redux. Какие есть ресурсы,курсы,уроки?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    По изучению на практике (решайте тестовые задачи или смотрите обзор решений).

    Там же на канале есть и вебинары. Мои учебники из ответа allbidder по "теории" хорошие, но код уже устарел. Новый будет не скоро, поэтому почитывайте и практикуйтесь с новым синтаксисом уже сейчас.
    Ответ написан
    1 комментарий
  • Как тестировать HOC компоненты(enzyme, jest)?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Сначала нужно ответить на вопрос: что именно хочется протестировать.

    Мне кажется, можно создать мок-компонент (с помощью jest mock) или взять свой реальный компонент и его обернуть в HOC функцию. Итого - получится "прокачанный компонент" функционал которого, думаю вы и хотите протестировать.
    1) снапшот можно сделать
    2) протестировать combineErrorsToShow

    Более тут я простора для теста не вижу. Connect нет смысла тестировать.

    p.s. не думаю, что сильно помог, но может получится поразмышлять в этом направлении и следовательно, что-то написать.
    Ответ написан
    Комментировать
  • Что значить dispatch в данном коде? Почему мы записываем его не как аргумент?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Добавлю:

    const funcName  = () => dispatch => {
      return dispatch({
        type: NAME_TYPE,
        payload: lol
      })
    }


    Превращается в:

    var funcName = function funcName() {
      return function(dispatch) {
        return dispatch({
          type: NAME_TYPE,
          payload: lol
        });
      };
    };

    (это если было сложно прочитать)

    Как уже ответили выше, dispatch становится доступным благодаря middleware redux-thunk. Для чего и зачем? Для того, чтобы мы могли "диспатчнуть" экшен в любой момент времени. Это обычно нужно для выполнения асинхронных запросов.

    Пример:

    export function getNews() {
      return dispatch => {
        dispatch(newsRequest())
    
        return httpGet(`news`) // начался асинхронный запрос
          .then(res => {
            if (checkResponse(res)) {
              dispatch(newsSuccess(res.data)) // когда завершился - вызываем dispatch, иначе откуда бы у нас в этой области видимости появилась переменная dispatch?
            } else {
              dispatch(newsFailure(res.message))
            }
          })
          .catch(error => {
            dispatch(newsFailure())
          })
      }
    }
    Ответ написан
    Комментировать
  • Почему возникает ошибка «Can't call setState (or forceUpdate) on an unmounted component» в React?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Привет, Бэн! Текст ошибки говорит о том, что вызываешь setState в компоненте, который уже "размонтирован" (то есть, которого уже нет на странице). Причина ошибки - лишнее обновление. Можно решить (код не смотрел внимательно) либо добавлением флага в componentWillUnmount и потом этот флаг проверять там, где обновления происходит, либо попробовать избавиться от причины этого обновления.
    Ответ написан
  • Почему после обновления свойства в сторе Redux компонент получает его старое значение?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Используется старый props, новый еще не пришел в этот момент (render'a нового еще не было).
    Вообще, все это можно сделать в одном экшене, нет необходимости писать 2 функции.

    Если очень хочется, то перенесите this.searchPosts() в componentWillReceiveProps / getDerivedStateFromProps, но как уже написал выше - лучше все сделать в одном запросе.
    Ответ написан