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
- src
Configuración de Redux
- 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';
Se crean los actionCreators en
proyecto/src/actions/users.js
y luego se combinan enproyecto/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 }
Se crean los reducers en
proyecto/src/reducers/users.js
y se combinan enproyecto/src/reducers/index.js
utilizandocombineReducers()
:- 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 })
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
Se envuelve a la aplicación en el componente
<Provider>
enproyecto/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');
Se convierte el estado de los componentes a propiedades con
mapStateToProps
enproyecto/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.