Pull to refresh
7
0
Борис Могила @BoryaMogila

js, php — разработчик

Send message
failed action как раз и создаётся при ловле SubmissionError, а success action реализуется
// ошибок нет, обрабатываем данные data

Работа с API в данной статье необсуждалась.
При чем тут ваша команда?
Ваша увереность это ваше личное дело. Предложите свое решение для удобства роботы с формами.
По вашей логике вся связка react + redux месиво из зависимосей.
А я считаю что переиспользовать в самый раз:
handleSubmit = (values) => {
        /* возвращаем промис
           erros в нашем случае это объект, в котором ключ - это название поля с ошибкой
           Например, {title: "Неверно введен заголовок"}*/
        return sleep(1000) {// симуляция ответа сервера}
          .then(({errors, ...data}) => {
             if (errors) {
                // бросаем экземпляр класса ошибки с текстами ошибок
                // _error общая ошибка для формы
                throw new SubmissionError({ ...errors, _error: 'Статья не добавлена!' })
             } else {
                // ошибок нет, обрабатываем данные data
            }
       })
    };
    render() {
        return (
            <div>
                {/* передаем обработчик*/}
                <Form onSubmit={this.handleSubmit} />
            </div>
        );
    }

Написал обработчик сабмита и подключил компонент. Чем вам не переиспользование?
Во-первых редакс. Статья так называется потому, что это проще решение чем те, с которыми я встречался в flux архитектурах. А чего ты хотел, пишы html сайты, так проще всего. Во-вторых я вижу ты в оружии лучше разбираешься…
Давай свое решение проще, которое позволит хорошо расширять логику, структурировать и доступатся к форме с других компонентов.
Это удобно и расширяемо. Все формы в одном месте, всегда есть доступ к ним извне, структурирование данных.
Удобно использовать на формах каталогов.
С промисом короче если у тебя один асинхронный запрос, а если у тебя 2 и больше асинхронных запроса, то на с async/await это:
(async function() {
    const request = require("request-promise")
    let someData = await request.get("http://example.com/");
    let anotherData = await request.get("http://example2.com/");
    // манипуляции с данными
    console.log(/*результат манипуляций*/);
   
})();

а с промисом:
const request = require("request-promise")
request
  .get("http://example.com/")
  .then((someData) => {
      request
         .get("http://example.com/")
         .then((anotherData) => {
              // манипуляции с данными
              console.log(/*результат манипуляций*/);
      })
   }

ничего не напоминает))
Т. е., если мы говорим о маршрутизации, о различных полезных HTTP-методах, о системах безопасности, защите от CSRF-атак, о кроссдоменных запросах, шаблонизаторах и т. д. — в koa ничего этого мы не найдем.

В ядре нет, но все это есть в виде библиотек, заточеных именно под коа. Большенство сдесь. А остальное можна найти в npm
По поводу async-await, и babel, отлично себя показали в продакшене, по всем показателям, неговоря про удобство.
А на koa 2.x можно писать и на промисах, тут дело выбора написать так:
(render) => {
    getUser()
        .then(user => user.payment_id)
        .then(getUserPaymentDetails)
        .then(render);
};

или так
async function (render) {
    let user = await getUser()
    let paymentDetails = await getUserPaymentDetails(user.payment_id)
    await render(paymentDetails)
};

Посути async-await транспилится в тотже промис и возращает тоже промис.
задачи создают менеджера, а мы их решаем.)))
Первый момент изоморфность, document.title на сервере не работает. Второй, представим что вы хотите нормальний шаринг, притом разный для разных соц сетей. У нас это выглядит премерно так
<title>Новостройки Украины</title>
    <meta name="title" content="Новостройки Украины" />
    <meta name="description" content="Каталог квартир в новостройках. Купить недорогую квартиру в новостройке от застройщика можно на сайте DOM.RIA." />

    <meta property="og:title" content="Новостройки Украины" />
    <meta property="og:description" content="Каталог квартир в новостройках. Купить недорогую квартиру в новостройке от застройщика можно на сайте DOM.RIA." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://dom.ria.com/ru/%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8/" />
    <meta property="og:locale" content="ru_UA"/>
    <meta property="og:locale:alternate" content="uk_UA"/>
    <meta property="og:site_name" content="DOM.RIA.com" />
    
    
    
    <meta property="og:image:width" content="620" />
    <meta property="og:image:height" content="460" />
    
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/92/9249/9249fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/148/14876/14876fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/92/9286/9286fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/95/9572/9572fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/107/10732/10732fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/115/11563/11563fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/129/12993/12993fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/130/13082/13082fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/0/75/7562/7562fl.jpg" />
    
        <meta property="og:image" content="https://cdn.riastatic.com/photos/dom/newbuild_photo/1/131/13176/13176fl.jpg" />
    

    <meta property="fb:app_id" content="*******" />
    <!-- for yandex webmaster -->
    <meta name='yandex-verification' content='********' />


    

    
    <link rel="alternate" hreflang="uk-UA" href="https://dom.ria.com/uk/%D0%9D%D0%BE%D0%B2%D0%BE%D0%B1%D1%83%D0%B4%D0%BE%D0%B2%D0%B8/"/>
    

    
    <link rel="alternate" hreflang="ru-UA" href="https://dom.ria.com/ru/%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8/"/>
С вами согласен, как мы знаем идеальных решений нет. Но думаю не составит труда написать на пару символов больше.
А почему ад? Предложите решение по лучше.
Статья зачёт.
Ремарка по поводу
class App extends Component {
  render() {
    return (
      <div>
        <Navbar>
          <Navbar.Header>
            <Navbar.Brand>
              <span>Hello World</span>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav navbar>
              <NavItem>Время</NavItem>
              <NavItem>Счетчики</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Grid>
          <HelloWorldPage />
        </Grid>
      </div>
    );
  }
}



На такие конструкции «Navbar.Header» будет ругатся babel если использовать
'transform-react-remove-prop-types',
'transform-react-constant-elements',
'transform-react-inline-elements'
Ремарка по поводу сервера, его тоже надо собирати, иначе при первом запросе будет просидание по скорости. я так понимаю из-за babel-loader.
Вот пример зборки на сервере
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
    .filter(function(x) {
        return ['.bin'].indexOf(x) === -1;
    })
    .forEach(function(mod) {
        nodeModules[mod] = 'commonjs ' + mod;
    });

var babelPlugins = ['transform-runtime'];

module.exports = {
    entry: './index.js',
    target: 'node',
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'backend.js'
    },
    module      : {
        loaders: [
            {
                loader : 'babel',
                exclude: /node_modules/,
                query: {
                    plugins: babelPlugins,
                    presets: ["stage-0", "react","es2015-node5"],
                }
            },
            {
                test: /\.css$/, loader: "style-loader!css-loader"
            },
        ]
    },
    externals: nodeModules,
    plugins: [
        new webpack.IgnorePlugin(/\.(css|less)$/),
        new webpack.BannerPlugin('require("source-map-support").install();',
            { raw: true, entryOnly: false })
    ],
    devtool: 'sourcemap'
}

не забудте забрать полифил и babel-register с серверного кода
Насколько я знаю то webpack при зборке вынесет class A и B в верх бандла, а потом их будет использовать. Но какая то странная зависимость. Так делать не стоит.
Преакт, минифицированый реакт
babel можно прекрутить куда угодно, вопрос стоит в удобсве натройки и предпочтении разработчика.

Information

Rating
Does not participate
Location
Винница, Винницкая обл., Украина
Date of birth
Registered
Activity