Ответы пользователя по тегу React
  • Как протестировать Redux saga с помощью jest?

    const gen = mySaga();
    const eff = gen.next().value;
    expect(eff).toEqual(
      all([
        takeLatest(Types.FETCH_INFO_DISK_REQUEST, fetchDisk),
        takeLatest(Types.FETCH_RESOURCES_REQUEST, fetchResources),
        // ...
      ]),
    );


    Проверяете что это прослушивается, отдельные саги тестируете по-отдельности
    Ответ написан
  • React передать данные в другой компонент по onclick?

    onClick={this.onClick.bind(null,item)}

    onClick = (item) => {
        this.setState({ editItem : item, showModal : true});
        // ...
    }


    <CardModal item={this.state.editItem} show={this.state.showModal}/>


    В компоненте модалки эти атрибуты будут тут this.props.item/show
    Ответ написан
    Комментировать
  • Как отправить пустую строку вместо undefined, redux-form?

    Например так:
    handleSubmit = (values) => {
    	values = {...values, someField : values.someField !== undefined ? values.someField : ""};
    	return updateById(this.props.user.id, values)
    		.then(res => {
    			if (res.error)
    				throw new SubmissionError({_error:res.error,...res.errors});
    
    			return res;
    		});
    }


    Или сделать так:
    initialValues={{
    	someField : ""
    }}


    Но вообще у тебя странное поведение, потому что redux-form отправляет null в случае если значение отсутствует. И логично было бы проверять это на сервере.
    Ответ написан
  • Вопрос от новичка по React?

    redux нужен для глобальных данных, общего состояния приложения (корзина товаров вполне подходит), для всего остального есть мас.. локальный стейт.
    --
    без него можно обойтись в твоем примере, если заврапить все компоненты которым нужна корзина в контейнер и передавать пропом во все ветки внутренних компонентов, как ты уже понял это стремно, не красиво и есть грабли вроде таких, что нам так же придется кидать в пропы и обработчики событий с общего контейнера.
    Ответ написан
    2 комментария
  • Полноценный пример SSR для react/redux?

    Да состояние собирается на сервере для каждого клиента (request'a), скажем на уровне мидлвара мы собираем состояние (текущего авторизованного пользователя, какие-то другие глобальные данные), далее отрабатывает обработчик маршрута, мы получили данные какой-то страницы из бд и передали их как контекст, примерно так:
    import React from 'react';
    import { StaticRouter } from 'react-router'
    import { Provider } from 'react-redux'
    import ReactDOMServer from 'react-dom/server';
    
    import App from './client/components/App.jsx'
    
    ReactDOMServer.renderToString(
    	<Provider store={ReduxStore}>
    		<StaticRouter
    			location={Url}
    			context={Context}>
    			<App/>
    		</StaticRouter>
    	</Provider>
    );

    Где, ReduxStore сгенерированное нами глобальное состояние (redux) запроса, Url запрошенный урл, Context контекст (будет передано как this.props.staticContext в компонент). Реакт вытянет нужный контейнер роута (по вашим маршрутам в App) и передаст ему контекст, компонент рендерится исходя из полученных данных. Результатом работы метода renderToString будет html строка (размеченная реактом), которую мы шаблонизатором или как угодно впиливаем в блок моунта компонента (в верстке), дополнительно в шаблонизатор передаем сгенерированное состояние, в документации выглядит вот так:
    window.__PRELOADED_STATE__ = JSON.stringify(preloadedState || {}).replace(/</g, '\\u003c')

    Теперь что происходит после того как страница загрузилась и подхватились клиент-скрипты? Все просто мы подхватываем состояние из window.__PRELOADED_STATE__ и вообщем-то все, глобальное состояние передано, компонент уже отрендерен, стоит учитывать что результаты при клиент-рендере и при сервер-рендере должны быть всегда одинаковыми, так же не использовать методы доступные браузеру, но не доступные серверу (на уровне моунта и первого рендера) и хорошенько следить за своим кодом в плане памяти, иначе при какой-либо утечке, память на сервере не будет вычищаться после каждого рендера.
    ---
    Как-то так, надеюсь помог, хотя там еще довольно много заковык
    Ответ написан
    20 комментариев
  • Коммуникация с сервером каждые N секунд, react/redux?

    webSocket и пусть сервер сам сообщает если данные изменились
    Ответ написан
    4 комментария
  • Где лучше размещать клиентские скрипты?

    Перед тегом </body>, если разместить их в шапке браузер будет тянуть их и пока не скачает не отрендерит html. Проблема решается атрибутом async, но теряется последовательность и тут приходит на помощь defer он отложит загрузку скриптов и в тоже время сохранит последовательность (но не включит асинхронность). async defer вкупе не работают. Если указывают async, а рядом defer то это лишь просто fallback атрибу для браузеров не поддерживающих async.

    async имеет смысл ставить если нам не важна последовательность
    Ответ написан
    Комментировать
  • Как в React задавать разные css-свойства для разных страниц?

    Ну где у вас рендерится тег body там и задавайте модификаторы в зависимости от роута или других параметров.
    Или например так:

    Layout:
    <body style={this.props.bodyStyle}>{this.props.children}</body>


    Home/About:
    <Layout bodyStyle={styles}>
    <Component/>
    </Layout>
    Ответ написан
    Комментировать
  • Как удалить свойство в state REACT?

    this.setState({ key : value });
    Ответ написан
    Комментировать
  • Что такое apollo stack для react?

    о, фронт становится все более сложным. тоже что и redux маппит данные, управляет ими и хранит, только для работы с ними используется GraphQL синтаксис, грубо мы строим запрос, он летит на сервер, там обрабатывается и выкидывает стандартизированные данные (только то, что попросили), аполло данные сожрет и даст нам интерфейс для управления ими
    Ответ написан
  • Как можно сделать SSR React приложение используя express?

    Примерно так:
    import React from 'react';
    import { StaticRouter } from 'react-router'
    import { Provider } from 'react-redux'
    import ReactDOMServer from 'react-dom/server';
    
    import Store from './store';
    
    export default (Url, Component, Props = {}, Context = {}) => {
    	return ReactDOMServer.renderToString(
    		<Provider store={Store}>
    			<StaticRouter
    				location={Url}
    				context={Context}>
    				<Component {...Props}/>
    			</StaticRouter>
    		</Provider>
    	);
    }


    import reactRenderToString from './reactRenderToString'
    import Component from '../client/routes/Home.jsx';
    
    console.log(reactRenderToString('/', Component))


    На выходе Html строка размеченная реактом, вставляем её в #app средствами шаблонизатора или что у вас, загружается страничка, скрипты, реакт подхватывает размеченный html и навешивает обработчики. P.S стоит быть внимательным с различными библиотеками на клиенте, т.к многий говно код (в том числе и наш) не дает сборщику собрать мусор и каждый наш рендер может валяться в памяти пока не вывалится...
    Ответ написан
    4 комментария
  • Где можно посмотреть пример кода компонента React взаимодействующий с API?

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