actions-dummyActions.js

/*
{
    type: 'KEYPRESS',
    payload: {
        keyPressed: 'a'
    }
}
*/

function dummyStartFetching() {
    return { type: 'DUMMY_FETCHING' };
}

function dummyFetchSuccess(responseFromService) {
    return { 
        type: 'DUMMY_FETCHING_SUCCESS', 
        payload: responseFromService
    };
}

function dummyFetchError(error) {
    return { 
        type: 'DUMMY_FETCHING_ERROR', 
        payload: { error: error } 
    };
}

// simulación de un servicio que demora 2seg en responder
function iniciarPeticionAlServicio() {
    return new Promise(function(resolve, reject) {
        setTimeout(
            function() {
                // resolve significa que se ejecuto bien
                // resolve ejecuta .then
                resolve({ firstName: 'lorem', lastName: 'ipsum' });                                                                                

                // reject es que fallo la operacion
                // reject ejecuta .catch
                //reject('no connection');
            }, 
            5000
        );
    });
}

function dummyFetch() {
    return function(dispatch) {
        dispatch(dummyStartFetching());

        iniciarPeticionAlServicio()
            //.cuandoElServicioResponda(function(respuestaDelServicio) {
            .then(function(respuestaDelServicio) {
                dispatch(dummyFetchSuccess(respuestaDelServicio));
            })
            //.cuandoElServicioFalle(function(errorDelServicio) {
            .catch(function(errorDelServicio) {
                dispatch(dummyFetchError(errorDelServicio));
            });
    }
    
}

module.exports = { dummyFetch };

components-broker-dummy-dummy.js

const React = require('react');
const PropTypes = require('prop-types');
const { connect } = require('react-redux');

const { dummyFetch } = require('actions/dummy');

class Dummy extends React.Component {
    componentWillMount() {
        if (this.props.onFetchDummy) {
            this.props.onFetchDummy();
        }
    }

    render() {
        const { firstName, lastName, isLoading, error } = this.props; 
        //this.props.userInfo.get('firstName')

        if (isLoading) {
            return <div>Cargando...</div>
        } else if (error) {
            return <div>Error: {`${error}`}</div>
        } else {
            return <div>{ `${firstName} ${lastName}` }</div>
        }
    }
}

Dummy.propTypes = {
    //userInfo: PropTypes.object.isRequired, Equivalente a lo de abajo
    firstName: PropTypes.string.isRequired,
    lastName: PropTypes.string.isRequired,
    isLoading: PropTypes.bool,
    error: PropTypes.string,
    onFetchDummy: PropTypes.func.isRequired,
};

Dummy.defaultProps = {
    isLoading: false,
    error: ''
};

module.exports.Dummy = Dummy;
module.exports.DummyContainer = connect(
    (state) => ({
        //userInfo: state.dummyReducer, Equivalente a lo de abajo
        firstName: state.dummyReducer.get('firstName'),
        lastName: state.dummyReducer.get('lastName'),
        isLoading: state.dummyReducer.get('isLoading'),
        error: state.dummyReducer.get('error')
    }),
    {
        onFetchDummy: dummyFetch
    }
)(Dummy);

reducers-broker-dummyReducer.js

const Immutable = require('immutable');

const INITIAL_STATE = Immutable.fromJS({
    firstName: '',
    lastName: '',
    isLoading: false,
    error: ''
});

/*

{ type: 'DUMMY_FETCHING', payload: { loading: true } } // cuando el servicio se este cargando
{ type: 'DUMMY_FETCHING_SUCCESS', payload: { name: 'lorem', lastname: 'ipsum' } }
{ type: 'DUMMY_FETCHING_ERROR', payload: { error: 'fallo el servicio' } }

*/

function dummyReducer(state = INITIAL_STATE, action) {
    switch (action.type) {
        case 'DUMMY_FETCHING':
            return state.set('isLoading', true);
        case 'DUMMY_FETCHING_SUCCESS':
            return state.merge({
                firstName: action.payload.firstName,
                lastName: action.payload.lastName,
                isLoading: false,
                error: ''
            });
        case 'DUMMY_FETCHING_ERROR':
            return state.merge({
                error: action.payload.error,
                isLoading: false
            });
        default:
            return state;
    }
}

module.exports = dummyReducer;

reducers-index.js

// @ reducers
const dummyReducer = require('./broker/dummy');

routes-brokerView-brokerSocksView-brokerStocksView.js

class BrokerStocksView extends Component {
    render() {
        return (
            <div>
                <Dummy firstName="componente normal: alex" lastName="normal: 15" error="No connection" />
                <DummyContainer/>
                <Dummy firstname="lio" lastname="messi" />
            </div>
        );
    }
}