Ответы пользователя по тегу Flux
  • Дает ли большую пользу серверный рендеринг React?

    @vsuhachev
    Дает возможность не дублировать код, если нужно отдавать поисковикам контент, который рендерится через react. Если у вас только корзина на react то вам оно ненужно, если весь магазин - тогда желательно, если хотите быть проиндексированным.
    Ответ написан
    Комментировать
  • Как не нарушить концепцию flux делая валидацию формы на серверной стороне?

    @vsuhachev
    Решение простое - рядом с данными заказа в store хранить еще и данные об ошибках по этому заказу. Если api вернуло ошибки валидации то сохранить их в store (это вызовет перерисовку компонента и ввывод ошибок). При деинициализации компонента, а так же при успешном выполнении вызова к api - чистить ошибки в store.
    Ответ написан
    2 комментария
  • Как reduсers обрабатывает данные в React Redux?

    @vsuhachev
    Редуцер должен возвращать объекты/хэши, а не так как у вас массивы.

    Весь этот синтаксис { ...state, loading: true} означает: Возьми пустой объект, скопируй туда все содержимое state, а потом переопредели следующие ключи (loading и т.д.)

    export default function company(state = defaultState, action) {
      switch (action.type) {
    
        case LOAD_REQUESTED:
          return {
            ...state,
            loading: true
          };
    
        case LOAD_OK:
          return {
            ...state,
            loading: false,
            counter: action.counter,
            app: action.app,
            errors: null
          };
    
        default:
          return state;
      }
    }
    Ответ написан
    2 комментария
  • Как сделать правильно ajax запрос в React Redux?

    @vsuhachev
    Т.к. ajax запросы асинхронные то на каждый такой запрос делается 3 ветки развития событий:
    • запрос отправлен
    • запрос завершился успешно
    • запрос завершился с ошибкой


    В коде это будет выглядеть как-то так
    export function loadInfo() {
        return dispatch => {
    
            dispatch({
                type: 'LOAD_INFO_REQUESTED'
            });
    
            request.get(
                Routes.root_path(),
                {headers: {'Accept': 'application/json'}}
            )
                .then(result => {
                    dispatch({
                        type: 'LOAD_INFO_OK',
                        info: result.data
                    })
                })
                .catch(result => {
                    dispatch({
                        type: 'LOAD_INFO_FAIL',
                        errors: result.statusText
                    })
                })
        }
    }

    Т.е. сначала экшн оповещает хранилище(store) что начал запрос и делает сам запрос. Далее в зависимости от результата хранилище будет оповещено либо от успехе либо об неудаче.
    Чтобы получить доступ к dispatch внутри экшена используется redux-thunk, который вы уже установили.

    Далее редуцер, обрабатывается 3 типа событий из экшена
    const defaultState = { loading: false, info: null, errors: null };
    
    export default function info(state = defaultState, action) {
      switch (action.type) {
    
        case LOAD_INFO_REQUESTED:
          return { loading: true };
    
        case LOAD_INFO_OK:
          return { loading: false, info: action.info, errors: null };
    
        case LOAD_INFO_FAIL:
          return { loading: false, info: null, errors: action.errors };
    
        default:
          return state;
      }
    }


    Компонент должен быть подключен к хранилищу с помощью connect, без него компонент не увидит store
    @connect(state => ({
        info: state.info
    }))
    
    class Info extends Component {
    
        componentDidMount() {
            const { dispatch } = this.props;
            dispatch(loadInfo()) // Вызываем загрузку
        }
    
      render() {
        const { loading, info, errors } = this.props.info;
    
        if (loadind) { return (<div>Loading</div>) }
        if (errors != null) { return (<div>Error!</div>) }
        return (
          <div>
            { info }
          </div>
        );
      }
    }


    Вобщем как-то так. В хэлпе на redux это все описано.
    Ответ написан
    5 комментариев
  • Какие есть альтернативные варианты Flux?

    @vsuhachev
    Есть fluxxor. На счет крупных/некрупных мне как react-нубу судить трудно. Во флюксоре подкупает хорошая документация и то что там как-то логичнее все чем например в reflux (имхо)
    Ответ написан
    Комментировать