• Где и как лучше хранить логику работы с api в React приложении?

    @antsam
    Много есть вариантов которые вполне можно использовать. Однозначно правильного и всеми принятого решения нет.
    Если проект на редаксе, то делают через мидлвары. Или thunk, или saga - что тоже мидлвары.
    Если вопрос чисто по апи, то посмотрите в сторону Apollo.
    Меня ни один вариант не устраивал. У меня свой - непопулярный.
    Я в своем последнем проекте провел жирную линию между UI и бизнесс логикой. Готовил статью по этому поводу, но все руки не дойдут ее закончить. Хоть тут отпишусь )

    Если в кратце то начиная с корневого компонента я разделил все на актеры и UI. Ветка с актерами отвечает за бизнесс логику, а ветка с UI только за отрисовку (то для чего реакт и был создан)
    У этих двух слоев общий стор (например с помощью редакса).
    UI слой берет данные из стора и по действиям пользователя меняет состояние.
    Слой актеров смотрит на изменение состояния и выполняет соответсвующие изменения в сторе. В том числе делает запросы на сервер и сохраняет результат в сторе.

    Но т.к. я люблю максимально все делить ня слои, то все методы API я вынес еще в один слой и прокинул их в актеры через контекст.

    Такой подход с актерами очень удобен в отличии от редакс мидлвар, т.к. можно использовать функционал реакта, а именно хуки.
    А чтобы не перепутать актеров с UI компонентами я их пишу немного в другом стиле - без jsx и оборачиваю в специально для этого созданный модуль react-ghost (типа "призрак")
    Ответ написан
    Комментировать
  • Где и как лучше хранить логику работы с api в React приложении?

    GreyCrew
    @GreyCrew
    Full-stack developer
    Могу порекомендовать хранить в мидлварах, вот мой пример организации
    Создаешь мапу экшнов с селекторами и адресами и юзаешь в мидлваре.
    Мапу можно расширить различными параметрами запроса и их использовать в мидлваре.

    UPD.
    Если у тебя модульная структура и не хочется захламлять весь проект списком из мап, то можно сделать api сагу, с которой бы была логика с мапой определенных эндпойнтов, которые используются в отдельном модуле/сервисе
    Ответ написан
    Комментировать
  • В чем разница метода setState() с аргументом объекта и функции?

    web_Developer_Victor
    @web_Developer_Victor
    Что такое google?
    const App = () => {
    	const [state, setState] = useState(0);
    
    	// используем тогда, когда нужно установить значенее, которое не зависит от state
    	setState(1);
    
    	setState((prevState) => {
    		return prevState + 1; 
    		// мы могли б написать return state + 1, 
    		// но тогда б мы не были б уверены, что там именно прошлый state (возможно, он еще не обновился)
    	});
    };
    Ответ написан
    Комментировать
  • Почему appendchild is not a function?

    alphatom
    @alphatom
    shet[i] = document.createElement = 'div'
    Измените на 
    shet[i] = document.createElement('div')
    Ответ написан
    Комментировать
  • Почему не работает react-beautiful-dnd?

    @ParaBellum577 Автор вопроса
    Пока ждал ответа - сам нашел решение... Может кому-то поможет в будущем:
    В общем draggableId={e.id} у меня - int, а должен быть str.
    Поменял id: 1 на id: "1" и все заработало.
    Ответ написан
    Комментировать
  • Зачем во Vue запросы выносят в services?

    Kozack
    @Kozack Куратор тега Vue.js
    Thinking about a11y
    1. Для упрощения кода. Скажем, чтобы не писать каждый раз всю конструкцию аля
      axios.get(ENDPOINT + '/api/' + API_METHOD, {
        params: {
          id
        }
      })
      .catch
      ...

      Делается обёртка, условная функция getUser(id). В неё выносится вся логика по работе с запросом, определение маршрутов АПИ, обработка ошибки и так далее. Наружу торчит только одна функция и параметр.
    2. При работе с TS это проще типизировать. Намного легче описать типы принимаемых параметров и возвращаемый тип для нескольких функций, чем описывать универсальную конструкцию для доступа к любым методам апи.
    3. Ну и наконец: сервис можно вызывать прямо в компонентах. Вызывать методы АПи не обязательно внутри Vuex. Доже чаще это должно выполняться внутри отдельных компонентов, каждый из которых работает с одним-двумя апи, а не со всем набором.
    Ответ написан
    4 комментария
  • Практика, практика, а где её взять-то?

    Заходишь в фигму - вкладка Community - тыкаешь на любой проект который понравился - копируешь фрейм - верстаешь
    Там тебе и целые сайты с несколькими страницами, отдельные элементы интерфейсов, адаптив сразу. Шик
    Ответ написан
    Комментировать
  • Как использовать классы в React (не классовые компоненты) с библиотекой Redux?

    @afanasiyz
    Javascript-разработчик
    Если вы не знаете, зачем это будет нужно, и не смогли найти в интернете best practices - значит скорее всего это никто не использовал.
    Вам либо надо придумать свой способ скрестить ежа и ужа, если у вас есть понимание, как это сделать хорошо, либо не пытаться изобретать велосипеды.

    "Что-то есть в языке, а я это не использую" - очень плохая мотивация, честно :)
    разве что для упражнений ума каких-то.
    Ответ написан
    1 комментарий
  • Почему не отрабатывает props React?

    @abberati
    frontend-разработчик
    ({ active, setActive, ... props })
    Ответ написан
    Комментировать
  • Как получить данные из неопределенного количества инпутов?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    1. id - уникальный идентификатор, он должен быть в одном экземпляре.
    2. В vue неопределённое количество input'ов выглядит примерно так:
    <div id="container">
      <input v-for="input in inputs" v-model="input.value" :name="input.name" type="hidden" >
    </div>
    data: {
      inputs: [
        {
          name: 'k1', 
          value: ""
        }, 
        {
          name: 'k2', 
          value: ""
        }
      ]
    }
    И значения получаются, соответственно, из массива inputs.

    В Vue ты работаешь с данным, а не с dom, dom лишь отражает состояние данных.
    Ответ написан
    Комментировать
  • Какие темы должен знать продвинутый разработчик на JS?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Каменной пятой точкой и бесконечным терпением.
    Ответ написан
    Комментировать
  • Как называется такой дизайн? Как научиться правильно верстать такие макеты?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:



    Развлекайтесь.
    Ответ написан
    Комментировать
  • Nuxt.js vs Custom SSR. Как лучше реализовать server side render на Vue.js?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Nuxt.js vs Custom SSR
    я за nuxt, потому что там всё из коробки, работает как часы, множество удобных абстракций
    как лучше делать SSR на Vue
    брать nuxt и радоваться что всё работает из коробки.
    Какие сложности могут возникнуть?
    Да никаких сложностей не должно быть. Сколько проектов не делал на nuxt, я ни разу не столкнулся с проблемой SSR. Все сложности, это работа с библиотеками которые внутри обращаются к window или document. Нужно просто уметь с такими вещами работать, в остальном всё нормально.

    Чего там автор напридумал, я хз, может какие-то проблемы и могут быть, но в статье о них толком ни слова и на опыте я не встретил ни одной проблемы SSR в nuxt. Автор показал, как можно сделать иначе, это ни плохо, ни хорошо. Это просто ещё один подход. Т.к. вы по всей видимости ещё новичёк, просто берите nuxt и наслаждайтесь его работой. А если вы найдёте проблемы, о которых не договорил автор статьи, то я бы с радостью об этом почитал.

    Не нравится nuxt? Ради бога, берите оффициальный vue-server-renderer, читайте доку, настраивайте и вперёд.

    P.S. Важно понимать и помнить, что nuxt несколько отличается от просто vue проекта большим кол-вом абстракций и в некоторых местах иными конструкциями кода
    Ответ написан
    4 комментария
  • Какие есть нюансы при написании расширения для Chrome?

    vinyardrip
    @vinyardrip
    вот ссылка https://www.youtube.com/watch?v=isRIUNTiTi8 там делает чел расширение
    Ответ написан
    Комментировать
  • Какие есть нюансы при написании расширения для Chrome?

    Stalker_RED
    @Stalker_RED
    https://developer.chrome.com/extensions/devguide
    Читай основы, начинай писать, и приходи с более конкретными вопросами.
    Подводные камни конечно есть, но все подряд перечислять - слишком большой объем.

    Начни с того, чтобы разобраться как передавать данные из фоновой части в интерфейсную, и обратно. Разберись с правами. Дальше все вроде просто.
    Ответ написан
    4 комментария
  • Как Junior'у разобраться в коде большого проекта на Vue.js?

    @greezly2020
    Потратитель времени на ответы в Habr. =)
    Первым делом спросил бы документацию к проекту)
    Ответ написан
    1 комментарий
  • Как Junior'у разобраться в коде большого проекта на Vue.js?

    @HikariNoSekai
    Middle Vue.js Developer
    Gimir Ну во первых надо понимать бизнес логику приложения, прежде чем его "разбирать". Я бы посоветовал начать с какого-то одного компонента, где интересно поврубать console.log и посмотреть где что выводит или обрабатывается. Если не понятно что-то смело обращайтесь к документации vue , там все понятно и доступно. Одновременно обратить внимание на кастомные компоненты, которые используются (package.json) в конкретном компоненте. По гуглить про него, что делает и как отображает и обрабатывает данные. Потом уже разбирать асинхронные запросы и vuex копать. Это сугубо мое мнение
    Ответ написан
    Комментировать
  • Как Junior'у разобраться в коде большого проекта на Vue.js?

    approximate_solution
    @approximate_solution
    JS Developer. Angular\React\Vue\Ember
    Первым делом я бы посмотрел бы на вашего мидла(серьора, лида), который скинул джуну код проекта и попросил в нем разобраться.
    У нас джуну давали таски, и помогали во всех насущных вопросах(без фанатизма).
    Из мира - надо сделать это - что бы работало так-то, вот дока, вот книги, вот мидл - будут вопросы - welcome.


    Нет ничего страшного если вы спросите совета у мидла(попросите доку, спросите о непонятных вещах), или кто вас там курирует. Если люди с головой - должны понимать, что даже бывает приходишь с опытом в проект, и хватаешься за голову от говнокода который на тебя выливается, ну или нормального кода в больших количествах.

    Если вы спросите, и Вам скажут что это не удел мидла, курировать джунов -то этот человек редиска - я бы на вашем месте подумал о смене компании. Иначе ваше развитие будет равно 0.
    Ответ написан
    Комментировать
  • В чем причина ошибки "Cannot read property 'setDraggables' of undefined" в vue-smooth-dnd?

    0xD34F
    @0xD34F Куратор тега Vue.js
    делаю все как показано в примере в оф. репозитории

    Пример не смотрел, но сильно сомневаюсь в правдивости вашего утверждения.

    В документации:

    API: Container

    Component that contains the draggable elements or components. Each of its children should be wrapped by Draggable component

    "Should be" - "должен быть". Должен. То есть, это не рекомендация, а прямое указание. Которое вы проигнорировали:

    <Container @drop="$emit('drop', row.id)" :get-child-payload="getChildPayload">
      <div class="row">
    Ответ написан
    1 комментарий