Guía para manejar la store de Redux

En esta oportunidad les queremos compartir una guía sobre cómo manejar la Store de Redux en React-Admin escrita luego de utilizarla en un proyecto por nuestra Socia @estefi.

Con sus propias palabras, ésta fue su principal motivación:

Indagando acerca del acceso y modificación de la store de Redux me vi en la necesidad de documentar los pasos, ya que puede optimizar de una manera simple el desarrollo de nuevas funcionalidades.

Ahora sí, la descripción en detalle de los pasos que documentó Estefi.

Cómo acceder a la store de redux

Se accede desde un componente:

// /src/services/example.js

class ExampleCreate extends React.Component {

Se deben importar las funciones compose y connect

// /src/services/examples.js

import compose from "recompose/compose";
import { connect } from "react-redux";

Definir la función mapStateToProps:

// /src/services/examples.js

const mapStateToProps = state => ({
  allResources: state.admin.resources,
  exampleProp: state.currentExample
});

Agregar las props al componente

// /src/services/examples.js

const enhance = compose(
  connect(
    mapStateToProps,
    null
  )
);
 
export const EnhancedExampleCreate = enhance(ExampleCreate);

Cómo modificar la store de redux

Como primer paso hay que crear un reducer:

// /store/reducers/example.js

const previousState = ""
export default (previousState, { type, payload }) => {
    if (type === "UPDATE_EXAMPLE") {
        return payload.example;
    }
    return previousState;
}

Hay que importarlo desde src/App.js:

// /src/App.js

import currentExampleReducer from "./store/reducers/example"

Registrar el reducer en <Admin>, simplemente hay que pasarlo como una prop:

// /src/App.js
const App = () => (
  <Admin
    customReducers={{ currentExample: currentExampleReducer }}
  >

Esto creará un campo en la store llamado currentExample y la store se verá asi:

{
    admin: { /*...*/ }, // used by react-admin
    form: { /*...*/ }, // used by redux-form
    routing: { /*...*/ }, // used by react-router-redux
    currentExample: "", // managed by exampleReducer
}

Se debe crear una acción que llame al reducer:

// /store/actions/example.js

import ActionTypes from "../constants/example";

export function setCurrentExample(example) {
  return {
    type: ActionTypes.UPDATE_EXAMPLE,
    payload: example
  };
}

Junto con su respectivo archivo de constantes:

// /store/constants/example.js

export default {
  UPDATE_EXAMPLE: "UPDATE_EXAMPLE",
}

Se accede desde un componente:

// /src/services/example.js

class ExampleCreate extends React.Component {

En el componente desde el cual se quiere modificar la store se importa la accion:

// /src/services/example.js

import { setCurrentExample } from "../store/actions/example"

Se deben importar las funciones compose y connect

// /src/services/example.js

import compose from "recompose/compose";
import { connect } from "react-redux";

Se crea la función mapDispatchToProps que se usa para enviar acciones a la store.

// /src/services/example.js

const mapDispatchToProps = (dispatch) => {
  return {
    setExample: (payload) => {
      dispatch(setCurrenExample(payload));
    }
  };
};

Agregamos las props al componente

// /src/services/example.js

const enhance = compose(
  connect(
    null,
    mapDispatchToProps
  ));

export const EnhancedExampleCreate = enhance(ExampleCreate);

y ya se pueden usar las funciones dentro del componente

// /src/services/example.js

this.props.setExample({example: "Hola mundo"})