• React.js. Доставка данных с сервера при первой загрузке и обновлении роута. Есть ли какие-то паттерны?

    @SuperOleg39ru
    Front-end разработчик
    У меня аналогичная ситуация, настраиваю react-router для нового приложения. Сразу скажу, что паттернов, кроме документации, не попадалось)

    В initialState для store вы сами решаете, что надо туда добавлять, в любом случае каждый редьюсер дает свой дефолтный кусочек общего state.

    По переходам - разделите данные на общие, которые нужны до старта приложения, и конкретные для компонентов.

    Про блок перехода - пример из документации, в зависимости от данных сверху, роут либо рендерит компонент, либо делает редирект.
    const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={props => (
        fakeAuth.isAuthenticated ? (
          <Component {...props}/>
        ) : (
          <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
          }}/>
        )
      )}/>
    )


    Пример компонента, который запрашивает данные. Все свойства через connect, но вы можете так же менять и отслеживать состояние запроса в state.
    // getUsers - свойство из mapDispatchToProps, запрос на сервер, по завершению обновляет users в вашем Store
    // users - свойство из mapStateToProps
    class UserListContainer extends Component {
      componentWillMount() {
        this.props.getUsers();
      }
    
      render() {
        const { users } = this.props;
    
        if (!users) {
          return <Spinner />
        }
    
        return <UserList data={users} />
      }
    }


    В моем приложении я включаю spinner при старте приложения, и выключаю в компоненте, который рендерится после получения нужных данных. Например можно делать так (свойства и методы так же через connect).
    У вас будет крутиться прелоадер, пойдет запрос на токен, по успеху пойдет запрос на users, по успеху начнет рендериться UserListContainer, который должен выключить прелоадер.
    class App extends Component {
      render() {
        const { appIsReady } = this.props;
    
        // наш лоадер на весь экран при appIsReady: false
        return (
            <div>
              {!appIsReady && <Spinner style='fullscreen' />}
              </Switch>
                <Route path='/' exact={true} component={Home} />
                <Route component={NotFound} />
              <Switch>
            </div>
        );
      }
    }

    class Home extends Component {
      componentWillMount() {
        if (!this.props.token) {
          this.props.getToken();
        }
      }
    
      render() {
        const { token } = this.props;
    
        if (!token) {
          return null;
        }
    
        // UserListContainer в willMount меняет appIsReady на true
        return <Route path='/users' component={UserListContainer} />  
      }
    }
    Ответ написан
    Комментировать
  • Как заменить изображения бэкграунда под различные разрешения?

    Чем гадать тут, почему бы не проделать опыт с тестовой страницей и посмотреть вкладку сеть. Сразу станет понятно - скачивает ли браузер сразу все картинки или же только для активных стилей. Если лень тестировать, то почитайте тут
    Ответ написан
    Комментировать