• Как подружить React-Router onEnter и redux?

    maxfarseer
    @maxfarseer
    https://maxpfrontend.ru, обучаю реакту и компании
    Вопрос волнующий многих. Опишу два способа.

    1
    Есть альтернатива onEnter: компонент, проверяющий показывать ли содержимое, либо показывать "доступ запрещен", например. Сам способ я подсмотрел здесь, если вы понимаете достаточно глубоко redux - то все понятно.
    Если нет, то я когда-то должен закончить мини-учебник по роутингу и вернусь к этому ответу.

    2
    Чтобы в onEnter прокидывать "store", нужно обернуть роуты в функцию.

    Выглядит примерно так:
    export function getRoutes(store) {
      return (
        <div>
          <Route path='/' component={App}>
            <IndexRoute component={Home} />
            <Route path='/admin' component={Admin} onEnter={Admin.onEnter.bind(this,store)}/>
            <Route path='/genre/:genre' component={Genre}>
              <Route path='/genre/:genre/:release' component={Release} />
            </Route>
            <Route path='/list' component={List} />
          </Route>
          <Route path='*' component={NotFound} />
        </div>
      )
    }


    Здесь в компонент Admin есть метод onEnter (я его вынес туда, так как это удобнее по-моему), и в нем вы можете спокойно проверять токен. Так же можете использовать store.getState() и подобное. Не забывайте, про стандартные возможности redux - они открывают многое, для чего необязательно тащить библиотеки.

    export default class Admin extends Component {
      static onEnter(store, nextState, replace) {
        const user = store.getState().user
        if (!user) {
          replace('/')
        } 
      }
      render() {
        return (
          <div className='row'>
            <div className='col-md-12'>Раздел /admin</div>
          </div>
        )
      }
    }


    Тем не менее, вопрос для меня лично открыт. Я пытаюсь решить кейс с редиректом в ответе на action ;) Как только найду устраивающее решение, так сразу и закончу свой мини-туториал
    Ответ написан
    Комментировать
  • Как оптимизировать видео, вставляемое в качестве фона?

    Taraflex
    @Taraflex
    Ищу работу. Контакты в профиле.
    Уменьшите битрейт и разрешение видео.
    Переместите метаданные в начало mp4 контейнера
    Установите preload="metadata"
    htmlbook.ru/html/video/preload

    Чтобы пиксели в глаза не бросались наложите на видео сеточку из маленьких черных точек
    https://jsfiddle.net/soumyabg/wefLyrhp/
    css background dotted overlay
    Ответ написан
    5 комментариев