Redux Business Logic

тынц

RxConnect — когда React встречает RxJS

Можно же переложить локальный стейт в стор редакса, и не будет изначальной проблемы.

Redux Business Logic

Кстати, до меня дошло, что это просто функция redux-thunk, если немного подправить:

const appLoad = config => dispatch => 
  // ...

Redux Business Logic

Абрамов в одном из роликов по редаксу демонстрировал, как переместить селекторы к редюсерам. Очевидно, с целью сконцентрировать бизнес-логику в одном месте.

Redux Business Logic

Мопед не мой, статья — конспект подкаста ради фидбека. Я же иду по стопам Твиттера, они сначала все хранили в сторе редакса, и потом только в рамках оптимизации вынесли состояния в локальный стейт компонентов, там где это потребовалось.

Redux Business Logic

Сами a,b,c,d в сторе хранить не надо, т.к. они не входят в модель

Я пока храню всё в сторе, игнорируя существование локального стейта компонентов, тупо для упрощения разработки.

Redux Business Logic

в стейте надо поставить какой-то флаг, что он недокалькулирован

в redux-act есть такая удобная штука — batch

Redux Business Logic

lifecycle-методы синхронные и вообще мы их не рассматриваем

Тут можно поспорить, я уже такого нагородил в componentDidMount :)

И в Next.JS у компонентов есть асинхронный getInitialProps.

Redux Business Logic

Пример выноса общего кода на redux-thunk:

export const appLoad = (dispatch, config) =>
  new Promise((resolve, reject) => {
    let isTimeout = false
    let isFetch = false
    setTimeout(() => {
      isTimeout = true
      if (isFetch) {
        dispatch(setLoading(false))
      }
    }, 500) // демонстрировать state.app.isLoading не менее 500 мс
    axios(config)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        dispatch(setMainError(error.toString()))
        reject(error)
      })
      .then(() => {
        isFetch = true
        if (isTimeout) {
          dispatch(setLoading(false))
        }
      })
  })

Можно попробовать — тынц

Интеграция React и DataTables — не так тяжело, как рекламируют

fixed-data-table by Facebook — достойный вариант

Сокращаем использование Redux кода с помощью React Apollo

Так ведь экшены с сайд-эффектами — это и есть абстракция над способом получения данных.

получаем из стора id матча и делаем в компоненте запрос на сервер

Просто диспатчим экшен, а откуда придут данные — не наша печаль.

Сокращаем использование Redux кода с помощью React Apollo

Интересно посмотреть, насколько будет больше кода в CRUD.

Простой туториал React Router v4

Мой более жирный пример применения React-Router V4 для CRUD — тынц.

Коллбэк в JavaScript… Что за зверь?

Почитайте такое и такое

Как слямзить Хабр по-быстрому

Победил подключение стилей в Helmet после его рендеринга!

код

class NotFound extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isRenderedHelmet: false,
    }
  }

  render() {
    return (
      <div className="not-found">
        <Helmet
          title="MyApp - 404"
          onChangeClientState={() => {
            if (!this.state.isRenderedHelmet)
              this.setState({
                isRenderedHelmet: true,
              })
          }}
        >
          <style type="text/css">{`
            html, body {
              height: 100%;
            }
            body {
              margin: 0;
              padding: 0;
              font-family: 'Roboto', sans-serif;
              overflow: hidden;
            }
            div#root {
              padding: 0 56px;
              display: flex;
              min-height: 100%;
              overflow: auto;
            }
            a {
              text-decoration: none;
            }
            .not-found {
              height: 50vh;
              margin: auto;
            }
            .logo img {
              width: 100px;
              height: 100px;
            }
            h1 {
              font-weight: normal;
            }
            .back-button {
              border: 2px solid gray;
              border-radius: 4px;
              padding: 8px;
              background: #eee;
              display: inline-block;
            }
            .back-text {
              color: black;
            }
          `}</style>
        </Helmet>
        {this.state.isRenderedHelmet &&
          <div>
            <div className="logo">
              <Link to="/" title="Go to the main page"><img alt="logo" src={logo} /></Link>
            </div>
            <h1>Page not found</h1>
            <p>The page is deprecated, deleted, or does not exist at all</p>
            <div className="back-button">
              <Link to="/"><span className="back-text">Go back to the main page</span></Link>
            </div>
          </div>}
      </div>
    )
  }
}

Коллбэк в JavaScript… Что за зверь?

Всё равно оно неправильно работает (ожидаю выполнение alert('Stop') после alert('Finished my homework'))

Коллбэк в JavaScript… Что за зверь?

Да, какую-то фигню сморозил. Идея была в том, чтобы сделать код синхронным.

Коллбэк в JavaScript… Что за зверь?

вот как можно обойти:

function doHomework(subject) {
    return new Promise(async function (resolve) {
        alert(`Starting my ${subject} homework.`);
        await resolve();
        alert('Stop');
    });
}
doHomework('math').then(alert('Finished my homework'));

Коллбэк в JavaScript… Что за зверь?

как преобразовать callback:

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
  alert('Stop');
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

к промисам:

function doHomework(subject) {
  return new Promise(function(resolve) {
    alert(`Starting my ${subject} homework.`);
    resolve();
    alert('Stop');
  });
}
doHomework('math').then(alert('Finished my homework'));

ожидаю выполнение alert('Stop') после alert('Finished my homework')

почему работает наоборот?

Интеграция React и DataTables — не так тяжело, как рекламируют

Очень даже в тему, таблица — полный фарш!