1

He estado mirando vídeos y leyendo documentos sobre React Redux, pero todos varían en algo y no concreto aplicarlo en un proyecto personal que tengo. Así que voy a tratar de enumerar los puntos necesarios para realizar un proyecto con React Redux.

Estructura de directorios

  • proyecto
    • src
      • components
      • User
        • index.js (Componente contenedor)
        • page.js (Componente presentacional)
      • actions
        • users.js
        • index.js (exporta la combinación de actionCreators)
      • reducers
        • users.js
        • index.js (exporta la combinación de reducers con combineReducers
      • constants
        • actionTypes.js
      • services
        • users.js
      • index.js
      • store.js
    • public
      • index.html

Configuración de Redux

  1. Se crean las constantes en proyecto/src/constants/actionTypes.js:
    export const CREATE_USER = 'CREATE_USER';
    export const DELETE_USER = 'DELETE_USER';
    export const UPDATE_USER = 'UPDATE_USER';
    
  2. Se crean los actionCreators en proyecto/src/actions/users.js y luego se combinan en proyecto/src/actions/index.js:

    • users.js

    import { CREATE_USER } from '../constants/actionTypes';
    
    export default function createUser(user) {
        type: CREATE_USER,
        user
    }
    
    • index.js

    import { createUser } from './users';
    
    export default {
        createUser
    }
    
  3. Se crean los reducers en proyecto/src/reducers/users.js y se combinan en proyecto/src/reducers/index.js utilizando combineReducers():

    • users.js

    import { CREATE_USER, UPDATE_USER, DELETE_USER } from '../constants/actionTypes';
    import { createUser } from '../services/users';
    
    const initialState = {
        name: '',
        password: '',
        email: ''
    }
    
    export default function users(state = initialState, action) {
        switch (action.type) {
            case CREATE_USER:
                state = createUser(action.user);
                return state;
        }
    }
    
    • index.js

    import users from './users';
    
    export default combineReducers({
        users
    })
    
  4. Se crea el store en proyecto/src/store.js:

    import { createStore } from 'redux';
    import reducers from './reducers';
    
    export const store = createStore(reducers);
    

    Configuración de React Redux

  5. Se envuelve a la aplicación en el componente <Provider> en proyecto/src/index.js:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { store } from './store';
    
    const Root = () => (
        `
            <Provider store={store}>
                <App />
            </Provider>
        `
    )
    
    ReactDOM.render(Root, document.getElementById('root');
    
  6. Se convierte el estado de los componentes a propiedades con mapStateToProps en proyecto/src/components/User/index.js:

    import React, { Component } from 'react';
    import { createUser } from '../../actions/users';
    import Page from './page';
    
    class User extends Component {
        render() {
            return <Page users={this.props.users} />
        }
    }
    
    const mapStateToProps = state => ({
        users: this.props.users
    });
    
    const mapDispatchToProops = dispatch => ({
        // ¿y acá?
    });
    
    export default connect(mapStateToProps, mapDispatchToProps)(User);
    

Entonces: La pregunta sería, ¿más o menos está bien éste ciclo? ¿Qué está mal?

Ejemplifiqué con un componente pero la aplicación es lógicamente más grande.

1
  • Quizás mi respuesta a esta otra pregunta te pueda servir.
    – gugadev
    Commented el 21 may. 2019 a las 21:21

3 respuestas 3

2

El primer error que noto es que en actions/users estás haciendo un export default y en el index lo requieres como: import { createUser } f... cuando lo ideal es que si al requerirlo va a ser de esa forma, entonces al exportarlo solo hagas: export function createUser () {...

Del resto para mí, luce bien lo que estás haciendo, sin embargo, no añadiste el contenido de lo que tiene tu archivo de services/users el cual por lo que veo tiene una función llamada createUser (verifica que no se esté exportando de la misma forma que el otro, o posiblemente tendrás un error al ejecutar). Debes tener en cuenta que si esta función es una función asíncrona entonces redux no funcionará. Una filosofía de redux es intentar manejar las funciones lo más simples posibles, si lees esto tendrás mucha más idea de qué te hablo, por lo que lo ideal para realizar esas acciones asíncronas es usar algo como redux-thunk.

Por otro lado, ten en cuenta que tus actions son los encargados de dar los datos para el nuevo state, y los reducers son la lógica para ubicar esos actions en el state. Por lo tanto, en ese orden de ideas, lo normal es que llames a createUser dentro del action y no dentro del reducer.

Haces una pregunta con respecto al mapStateToProps y el mapDispatchToProps, la diferencia básicamente de cada uno es lo que reciben. mapStateToProps recibe como parámetro de la función el state y todo lo que devuelvas en el objeto se lo asignará al componente por medio de la función connect, y mapDispatchToProps recibe como parámetros el dispatch el cual es el encargado de hacer correr tus actions, sabiendo eso, podrías hacer algo así:

const mapDispatchToProps = (dispatch) => ({
  createUser: (payload) => {
    // ejecutamos la acción
    return dispatch(createUser(payload));
  }
});

Y ahora en cualquier método de tu componente puedes llamarla y usarla así (esto varía de acuerdo a lo que realice tu función createUser, es solo un ejemplo)

crearUsuario() {
  this.props.createUser({ name: 'Foo', lastName: 'Bar' });
}

Como última anotación, veo que tu componente Root renderiza algo como esto:

`
    <Provider store={store}>
        <App />
    </Provider>
`

No necesitas de esas comillas, puedes hacerlo directamente gracias a JSX.

Ahora si, espero haberte ayudado a resolver algunas dudas, de igual forma puedes comentar la respuesta y te ayudaría en alguna otra inquietud que tengas, del resto, vas por buen camino y has entendio bastante bien el concepto de redux

1
  • Hola, muchas gracias por tu respuesta. Se podría decir que me ubica mucho mejor. Me equivoqué al escribir las comillas ```` ya que no basé el código en mi aplicación real, sino en un ejemplo de lo que yo normalmente utilizo, y entiendo que JSX no necesita esas comillas. Voy a tratar de leer más sobre redux-thunk para realizar acciones asíncronas. Nuevamente gracias por tus comentarios.
    – Maramal
    Commented el 21 may. 2019 a las 20:53
0

Comparto la recomendación de agregar un middleware como redux-thunks otra recomendación puede ser que utilices el patron Redux Ducks https://medium.com/react-redux/estructura-de-archivos-ducks-para-redux-js-36bb56a70cb3 lo cual haría mucho mas sencilla la creación de actions y reducers

Otra herramienta muy útil para todo desarrollador React-Redux es Redux Dev Tools https://github.com/zalmoxisus/redux-devtools-extension

0

Existen muchas implementaciones de Redux.

En tu "mapDispatchToProops" van los actions que haran cambios en tus reducers, .en tu caso sería createUser

Otra cosa que debes tomar en cuenta es que para poder hacer actions asincronos necesitaras un middleware, te recomiendo redux-thunks (Igual que en el comentario de arriba)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.