Ответы пользователя по тегу Redux
  • Как после регистрации отправить данные в БД. React+redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1. Отправляете запрос на регистрацию на ваше API
    2. Бэкэнд сервер в случае успешной регистрации кладет объект юзера в базу и вам присылает ответ, ну например:
    { status: 'ok', userId: 1, role: 'admin', token: 'abc1023123', ... }

    3. Необходимые данные из ответа сохраняете в store. Так же можете записать токен в LS или в cookie.
    4. После перезагрузки страницы, отправляете запрос с токеном на сервер, на путь, типа /validate. Сервер проверяет и если все ок - отвечает "ОК, доступ разрешен + данные по юзеру".

    С логином так же, вводятся данные идет запрос на /login, например, и ответ OK + token + данные по юзеру
    Ответ написан
    Комментировать
  • Почему портятся стили когда импортирую чужой UI?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Думаю, ваши правила перезаписываются теми правилами, которые есть в semantic.min.css.
    Ответ написан
  • Как вернуться к начальному состоянию редюсера в redux конкретного свойства?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    после определенных действий свойство type_id изменилось, как откатиться назад к начальному состоянию только свойства type_id не затрагивая другие?

    Добавлю теории: выше, Yustas Alexu написал вам код, осталось только пояснить, что в нем, вы берете все то, что есть в state, и переписываете filter_models, в котором опять же берете все что было в state.filters_models и переписываете только одно свойство.
    Итого: нужно разобраться как работает оператор ..., создайте объекты разной вложенности в песочнице, и на основе ответа от Yuxus попробуйте по изменять разные поля, не ломая остальное.
    Ответ написан
    Комментировать
  • Почему в react при переходах по стр - они отрываются снизу?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Не должно быть такого, сделайте демо на гитхаб, чтобы понять получше.
    p.s. на крайняк, если все плохо, всегда можно использовать window.scrollTo
    Ответ написан
    2 комментария
  • Почему не работает создание объекта?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Дополню ответ 0xD34F - нельзя в качестве названия свойства указывать что-то через точку.

    return {
              ...state,
              название_поля:{
                  title:action.title
              }
          }


    где вместо название_поля должна быть строка! Если вы хотите, чтобы это было вычисляемое выражение, то нужно добавлять (как уже сказано было) квадратные скобки, то есть:

    return {
              ...state,
              [action.title]:{
                  title:action.title
              }
          }


    Но я думаю 99% вам хочется чего-то не такого, ибо в таком случае у вас получается что в state будет установлен title в поле с таким названием, которое вам придет в action.title, например:

    return {
              ...state,
              dollar:{
                  title: "dollar" // предположим что в action.title строка "dollar"
              }
          }


    Чтобы разобраться - теория.

    p.s. тэг "функциональное программирование" тут смотрится слишком опасно)
    Ответ написан
    1 комментарий
  • Как будет выглядеть аналогичный код на любом action creator?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы отправляете простой объект:
    {
      type: 'BLA_BLA'
    }

    Это ваш action.

    Это
    function qq() {
      return {
        type: 'BLA_BLA',
      }
    }

    ваш "создатель действия" (action creator).

    Чтобы объект с типом (и данными если нужно), попал в редьюсер, его нужно прокинуть через специальную "трубу" - dispatch (диспетчер).

    То есть:
    dispatch(qq())
    // или
    dispatch({
      type: 'BLA_BLA',
    })


    Затем, пропущенный через "диспетчер" объект, попадет во все редьюсеры. В каком-то из редьюсеров, будет команда "фас" на определенный тип (type), в нашем случае - строка 'BLA_BLA', значит:

    export default (state = initialState, action) => {
        switch (action.type)
        {
            case 'BLA_BLA':
                // вот сюда придет javascript компилятор, так как вы попали в нужный кейс
                // ибо выше указано - switch по типу экшена (action.type)
               // ниже вы делаете что вам нужно с вашими данными
              // конкретно в этом кейсе, вы берете все что было в state и изменяете loading на true
                return { ...state, loading: true };
            case CALLBACK_SUCCESS:
                // сюда action с типом 'BLA_BLA' не попал
                return { ...state, status: 'OK' };
            case CALLBACK_ERROR:
               // сюда тоже
                return { ...state, status: 'ERROR', message: action.message };
            default:
              // и сюда
                return state;
        }
    }
    Ответ написан
    Комментировать
  • Почему выполняется только последний dispatch?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Проблем в connect'e не вижу. Ищите дальше по цепочке. Может быть дело в reducer'e?
    Экшен IS_AUTH в логгере или redux_dev_tools виден?
    Ответ написан
  • Когда mapStateToProps готов?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    вариант: делаете компонент WalletsContainer, в которой передается массив кошельков (сначала пустой, а потом уже и заполненый, и все без доп проверок, просто пришли новые пропсы), в котором внутри проверяется запросом каждый кошелек (через promise.all в экшене) и в итоге по окончанию проверок всего что нужно - вызывается апдейт в сторе. Либо апдейты в сторе вызываются асинхронно, обновляя только нужный кошелек (запрос на баланс котрого завершился). Если нужно взаимодействовать с родителем - либо функции прокидываете, либо используете redux далее.

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

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Внутри connect функции вы подписываетесь на кусочек вашего store (то есть, на кусочек всего состояния вашего приложения). Обычно это выглядит так:

    const mapStateToProps = state => ({ // state = все ваши редьюсеры, то есть тут лучше было бы писать store, но так уж поевелось..
      campaigns: state.campaigns, // компонент подписывается только на state.campaigns (то есть только на редьюсер campaigns)
    });
    connect(mapStateToProps/*, mapDispatchToProps*/)(CampaignsList) // происходит коннект, mapDispatshToProps - это для "прокидывания" создателей действий (action creator)


    Следовательно, вы можете просто в обоих компонентах приконнектится к одной части в сторе, либо еще лучше приконнектится в родителе и отрисовывать два списка компонентами.

    В скором времени будет вебинар (вход свободный) по основам редакса, думаю вы к тому времени уже разберетесь, но тем не менее заходите (vk / telegram, сайт)
    Ответ написан
  • Как избежать дублирования экшенов и редьюсеров?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Одинаковые данные грузятся одним и тем же экшеном, в один и тот же редьюсер.
    Ситуация с юзерами вполне ясна, загружаете их и используете на разных страницах. Если нужно обновить список юзеров - то вызывается тот же экшен.
    Если нужно как-то с юзерами взаимодействовать, но так, чтобы в другом месте они не изменелись, то поясните, я не могу придумать такой кейс, обычно это "не одинаковые" данные.
    Ответ написан
    6 комментариев
  • Почему не меняется состояние хранилища?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы забыли store.subscribe

    Сравните с примером здесь
    Ответ написан
    Комментировать
  • Next.js redux axios store?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    1) проверьте, что в индексном файле редьюсеров, ваш редьюсер сериалов подключен
    2)
    case LOAD_SERIAL_SUCCESS:
      return {
          ...state, // берем все что было в state
          serials: action.serials, // но перезаписываем свойство serials
      };
    Ответ написан
  • Как быть в рамках Redux, когда экшены раскиданы по компонентам?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Есть такая же задача, для себя выбрал такое решение, уже были доработки (увеличить количество попапов и логику в них - все легко добавляется):
    делаете PopupContainer в котором отрисовываете все модальные окна. У них в isOpen (признаке показано/скрыто) - значение из редьюсера попапов. У меня редьюсер там простейший - просто имя попапа + true/false.

    Итого имеем возможность показать любой попап хоть откуда, нет излишнего дублирования кода, и для каждого попапа можно назначить свои экшены, которые уже будут спускаться в дочерний "тупой" компонент, на onClose или на какое-то действие внутри попапа, например: отправить заявку на подписку.
    Ответ написан
    Комментировать
  • Как обновить state child-a с parent компонента, react?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Ну так же как всегда, изменяете blocks - получается происходит перерисовка.
    Чтобы избавиться от лишних перерисовок, если нельзя изменить такую вложенность, то добавляйте shouldComponentUpdate хук
    Ответ написан
  • Websocket + redux, как правильно подрубать?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вы сами себе на вопрос ответили: ws.onmessage(data)

    Внутри обработчика onmessage, в зависимости от того, что пришло в data - вы можете обрабатывать ваши данные различным способом. Чтобы обработанные данные попали в нужный редьюсер, вам нужно диспатчить разные экшены.

    Например:

    ws.onmessage = (data) => {
      const myData = JSON.parse(data.data); // предположим, что там собаки или кошки
      if (data.data = 'cats') { dispatch(addToCats(data.data) }
      if (... )
    
      // можете обработать каким-либо образом:
      const newData = '123' + data.data
      dispatch(anyActionCreator(newData)
    }
    Ответ написан
    Комментировать
  • Что сделать на реакте в целях практики, пока нет работы?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Поработайте с VK Api, Instagram API, Steam API (и тд, что интересно)
    Дашборд делали, там были филтрации/сортировки?
    Ответ написан
    5 комментариев
  • Почему при изменении состояния в redux не рендерится компонент?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Чего-то здесь не хватает... логика поиска проблемы правильная. Если в вашем редьюсере в консоль падает то, что нужно, значит следуйте дальше: в компонент, где этот редьюсер подключен и смотрите внутри mapStateToProps так же с помощью консоли, изменились данные или нет. Правильно ли вы их подключили и т.д. (получается вам надо проверить и SideBar и SideBarChat)
    Ответ написан
  • Django rest framework, react, redux как сделать вход пользователей?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Запрос к апи разумеется в экшене (ну если быть точнее, то в AC - action creator, функции, которая диспатчит ваши экшены). Сессию храните где вам удобнее. Если бы это был JWT - можно было бы хранить в localStorage, хотя по этому поводу много споров (безопасино или нет в LS хранить).
    Ответ написан
    Комментировать
  • Как установить или передать через redux state компоненту?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    function mapStateToProps(state) {
        console.log(state) // и здесь смотрите, есть ли у вас в state - state.potato, если нет, значит забыли это сделать в корневом редьюсере. А если есть, то смотрите что у вас хранится в state.potato.products
        return {
    //potate-store
            products: state.potato.products
        }
    }


    Скиньте свой корневой редьюсер, который вы передаете в configureStore функцию, если не разберетесь.
    Ответ написан
  • Как сделать модальные окна для карточек товаров?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    React-modal хорошая библиотека, ничего лишнего, я бы рекомендовал оставить ее.
    Как сделать модалку:
    на том уровне, где у вас отрисовывается каталог, или даже выше - вы рисуете модальное окно и ему передаете признак, по которому оно открыто, например: isProductModalOpen (true / false). Этот код находится в "контейнере", приконекченном к redux.

    Далее при клике на кнопку подробнее, вы бросаете экшен OPEN_PRODUCT_MODAL + айдишник товара (который будете запрашивать с сервера) или + всю инфу о товаре, если она у вас уже есть и вам ничего не нужно запрашивать.

    Редьюсер, отвечающий за модальные окна принимает этот экшен и обрабатывает. В частности устанавливает значение, на которое вы опираетесь в контейнере и делаете true для флага isProductModalOpen

    По закрытию модалки - так же улетает экшен, который обрабатывается в редьюсере и признак isProductModalOpen ставится равным false.

    Готово!

    Такой подход позволяет делать несколько модальных окон разных типов.
    Ответ написан
    3 комментария