Ответы пользователя по тегу Redux
  • Как построить архитектуру React + Redux приложения?

    Amazing-Space-Invader
    @Amazing-Space-Invader
    веб-хипстер
    Привет! Вот небольшой листинг кода, надеюсь, что он поможет тебе разобраться самостоятельно.
    + вот неплохая статья о redux

    actions/constants.js
    export const LIST_AD_REQUEST = 'LIST_AD_REQUEST';
    export const LIST_AD_SUCCESS = 'LIST_AD_SUCCESS';
    export const LIST_AD_FAILURE = 'LIST_AD_FAILURE';


    actions/listAdActions.js
    import request from 'superagent'
    import Auth from '../modules/Auth'
    
    import { adUrl,
        LIST_AD_REQUEST, LIST_AD_SUCCESS, LIST_AD_FAILURE } from './constants'
    
    export function listAd() {
        return (dispatch) => {
            dispatch(listAdRequest());
    
            const userId = Auth.getUserId();
            const params = `?author=${userId}&list=true`;
    
            return request
                .get(adUrl + params)
                .set('Accept', 'application/json')
                .set('Authorization', Auth.getToken())
                .end((err, res) => {
                    if (err) {
                        dispatch(listAdFailure(err));
                    } else {
                        dispatch(listAdSuccess(res.body));
                    }
                });
        }
    }
    
    function listAdRequest() {
        return { type: LIST_AD_REQUEST }
    }
    
    function listAdSuccess(ads) {
        return { type: LIST_AD_SUCCESS, ads }
    }
    
    function listAdFailure() {
        return { type: LIST_AD_FAILURE }
    }


    reducers/ads.js
    import {
        LIST_AD_REQUEST, LIST_AD_SUCCESS, LIST_AD_FAILURE
    } from '../actions/constants'
    
    const ads = (state = [], action) => {
        switch (action.type) {
            case LIST_AD_SUCCESS:
                return action.ads;
    
            default:
                return state;
        }
    };


    reducers/index.js
    import ads from './ad'
    
    export default Object.assign({}, ads);


    containers/ListAds/ListAds.js
    import React, { Component } from 'react'
    import { connect } from 'react-redux'
    import { listAd } from '../../actions/ListAdActions'
    
    class ListAd extends Component {
        componentDidMount() {
            this.props.dispatch(listAd());
        }
    
        render() {
            const { ads } = this.props;
    
            return (
                <div>
                    <div className={ s.content }>
    
                        { 
                            ads.map((ad, i) =>
                                <div className={ s.ad } key={ i }>
                                    <h3>
                                        <Link to={ 'list-ad/single-ad/' + ad.id }>{ ad.name }</Link>
                                    </h3>
                                    <small>{ ad.status }</small>
    
                                    <ul>
                                        <li><b>Дата начала</b>: { ad.start_date }</li>
                                        <li><b>Дата конца</b>: { ad.stop_date }</li>
                                        <li><b>Бюджет</b>: { ad.budget }</li>
                                    </ul>
                                </div>
                            )
                        }
    
                    </div>
                </div>
            )
        }
    }
    
    export default connect(state => ({ ads: state.ads, user: state.user }))(ListAd)


    Также можно использовать акшон getAdsIfNeeded() - суть в том, что если в state есть ads, то реквест к апи не произойдет.
    Ответ написан
  • Как правильно осуществлять серверный рендеринг на React-Redux?

    Amazing-Space-Invader
    @Amazing-Space-Invader
    веб-хипстер
    Привет! Посмотри исходники здесь - это форк этой репы.
    Он немного отстает, но мы скоро его обновим.
    Ответ написан
  • Какой правильный подход для реализации асинхронных действий в парадигме Redux?

    Amazing-Space-Invader
    @Amazing-Space-Invader
    веб-хипстер
    Конфиги нужно получать синхронно или асинхронно? В любом случае получение лучше реализовать в actions. Какие-то манипуляции тоже. Диспатчить их тогда, когда понадобится. Вот туториал по асинхронной подгрузке json
    Ответ написан
    Комментировать
  • Redux - как хранить данные в input при рендере?

    Amazing-Space-Invader
    @Amazing-Space-Invader
    веб-хипстер
    import React, { Component, PropTypes } from 'react'
    
    class Main extends Component {
        constructor(props, context) {
            super(props, context);
            this.state = {
                inputValue: this.props.inputValue || ''
            };
        }
    
        handleNameChange(e) {
            this.setState({ inputValue: e.target.value });
        }
    
        render() {
            return (
                <div>
                    <input type='text' onChange={ ::this.handleInputChange } />
                    <div>input value: { this.state.inputValue }</div>
                </div>
            )
        }
    }
    
    export default Main
    Ответ написан
    Комментировать