2

Bueno me encuentro haciendo una aplicación React-Readux, y tengo el siguiente Array de objetos que tiene mi store:

const authors = [
  {
    id: 'cory-house',
    firstName: 'Cory',
    lastName: 'House',
    address: {
      city: 'Caracas'
    }
  },
  {
    id: 'scott-allen',
    firstName: 'Scott',
    lastName: 'Allen',
    address: {
      city: 'Caracas'
    }
  },
  {
    id: 'dan-wahlin',
    firstName: 'Dan',
    lastName: 'Wahlin',
    address: {
      city: 'Caracas'
    }
  }
];

Cuando hago un update, en mi reductor, tengo lo siguiente:

import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function authorReducer(state = initialState.authors, action) {
  console.log('actions ', action);
  console.log('state ', state);
  switch (action.type) {
    case types.LOAD_AUTHORS_SUCCESS:
      return action.authors;
    case types.CREATE_AUTHOR_SUCCESS:
      return [
        ...state,
        Object.assign({}, action.author)
      ];
    case types.UPDATE_AUTHOR_SUCCESS:
      return [
          ...state.filter(author => author.id !== action.author.id),
          Object.assign({}, action.author)
        ];
    case types.DELETE_AUTHOR_SUCCESS:
      var existingAuthorIndex = state.findIndex(a => a.id == action.author.id);
      console.log('Index ', existingAuthorIndex);
      return [
        ...state.filter(author => author.id !== action.author.id)
      ]
    default:
      return state;
  }
}

El Object.assign que tengo en el UPDATE_AUTHOR_SUCCESS solo hace un "copia" superficial, lo que quiere decir que solo copia un nivel de mi Objeto, entonces al tratar de modificar el campo address, me arroja el siguiente error:

browser.js?9520:40 Uncaught Error: A state mutation was detected between dispatches, in the path authors.0.address.city. This may cause incorrect behavior.

Todo el problema es por que debo hacer una copia profunda (Deep-copy) de este pero no se como hacerla.

He intentado hacerlo:

case types.UPDATE_USERS:
  console.log('My uaser ', action);
  return [
      ...state.filter(user => user.id !== action.user.id),
      Object.assign({},  action.user, action.user.address)
    ];

Pero igual me falla, ya que no es lo correcto.

Actualización

Por alguna razón en el componente donde gestiono mi update lo tenía así:

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import AuthorForm from './AuthorForm';
import * as authorActions from '../../actions/authorActions';
import toastr from 'toastr';

export class AuthorManagePage extends React.Component{
  constructor(props, context){
    super(props, context);

    this.state={
      author: Object.assign({}, props.author),
      errors:{},
      saving: false
    };

    this.saveAuthor = this.saveAuthor.bind(this);
    this.updateAuthorState = this.updateAuthorState.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.author.id != nextProps.author.id) {
      // Necessary to populate form when existing course is loaded directly.
      var clone = Object.assign({}, nextProps.author)
      clone.address = Object.assign({}, nextProps.author.address);
      this.setState({authors: clone});
    }
  }

  updateAuthorState(event) {
    // const field = event.target.name;
    // let author = this.state.author;
    // author[field] = event.target.value;
    // return this.setState({author: author});

    const hasSubField = event.target.name.split('.');
    console.log(hasSubField)
    if (hasSubField.length > 1) {
      let author = this.state.author;
      author[hasSubField[0]][hasSubField[1]] = event.target.value;
      return this.setState({author:author});
    }
    // else if(hasSubField.length > 2){
    //     // let user = this.state.user;
    //     // user.address.geo.lat = event.target.value;
    //     // return this.setState({user:user});
    //     
    //     
    //     let user = Object.assign({}, this.state.user);
    //     user.address.geo.lat = event.target.value;
    //     return this.setState({user:user});
    // 
    // }
    else {
      const field = event.target.name;
      let author = this.state.user;
      author[field] = event.target.value;
      return this.setState({author:author });
    }
  }

  redirect() {
    this.setState({saving: false});
    toastr.success('Author saved');
    this.context.router.push('/authors');
  }

  saveAuthor(event){
    event.preventDefault();

    this.setState({saving: true});
    var author = this.state.author;
    this.props.actions.saveAuthor(this.state.author).then(() => this.redirect())
    .catch(error => {
      toastr.error(error);
      this.setState({saving: false});
    }); 
  }

  render(){
      return(
        <AuthorForm 
          author={this.state.author}
          onSave={this.saveAuthor}
          errors={this.state.errors}
          saving={this.state.saving}
          onChange={this.updateAuthorState}
        />
      );
  }
}

function getAuthor(authors, authorId){
  const author = authors.filter(author => author.id === authorId);
  if(author.length) return author[0];
  return null;
}

AuthorManagePage.propTypes = {
  author: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired
};

//Pull in the React Router context so router is available on this.context.router.
AuthorManagePage.contextTypes = {
  router: PropTypes.object
};

function mapStateToProps(state, ownProps) {
  let authorId = ownProps.params.id;

  let author = {id: '', firstName: '', lastName: '', address: { city: ''}};

  if (authorId && state.authors.length > 0) {
      author = getAuthor(state.authors, authorId);
  }

  return {
    author: author
  };
}


function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(authorActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AuthorManagePage);

Y me di cuenta que en el constructor, en el this.state no se estaba copiando completo el objeto, solo lo cambié por esto:

this.state={
  author: JSON.parse(JSON.stringify(props.author)),
  errors:{},
  saving: false
};

Y me funciona, pero lo que no entiendo es el por qué?

El código completo esta acá

2 respuestas 2

2

Simplemente reemplaza por:

return state.map(author => author.id === action.author.id ? action.author : author);

Mapeamos el array de autores y por cada uno, comparamos si el id del autor actual pertenece al payload, en caso afirmativo, en lugar del author actual devuelves el payload (el editado).

Actualización

En realidad si estás haciendo un copiado correcto en el estado:

const author = {
  id: 'cory-house',
  firstName: 'Cory',
  lastName: 'House',
  address: {
    city: 'Caracas'
  },
};

console.log(Object.assign({}, author)); // -> resultado esperado

Lo que haces en componentDidMount es innecesario; Object.assign copia varios niveles de profundidad; sin embargo, deberías tener cuidado si el objeto a clonar tiene referencias ya que este método solo copia valores.

componentWillReceiveProps(nextProps) {
  if (this.props.author.id != nextProps.author.id) {
    const author = Object.assign({}, nextProps.author);
    this.setState({author }); // fíjate que habías escrito 'authors'
  }
}

En el código anterior tenías un error tipográfico; al actualizar el estado lo hacías con la clave authors; de hecho, lo lógico sería que cuando recibieses un nuevo autor en el componente, este nunca reemplace al actual.

Otros problemas que veo es que en el código para actualizar y guardar, por ejemplo, deberías clonar el autor del estado en lugar de hacer una asignación, de lo contrario estarías guardando una "referencia" al objeto en cuestión:

const author = this.state.author; // mal
const autor = Object.assign({}, this.state.author); // bien
const autor = ...state.author; // es igual, usamos rest spread

La función getAuthor puede ser reducida a:

const getAuhtor = (authors, authorId) => authors.find(a => a.id === authorId);

Recomendaciones

Si usas Redux, minimiza el uso del estado del componente. En tu caso, no debería haber un objeto author en el estado del componente; en su lugar, deberías crear un objeto newAuthor en el store y actuar directamente sobre él; de modo que al guardar despaches una acción con la cual el reducer quedaría como:

case types.AUTHORS_SAVE_IN_PROCESS: {
  return {
    ...state,
    saving: payload,
  };
}
case types.AUTHORS_SAVE_SUCCESS: {
  const authors = ...state.authors;
  authors.push(payload);

  return {
    ...state,
    authors,
  };
}
case types.AUTHORS_SAVE_FAIL: {
  return {
    ...state,
    fail: true,
    message: payload,
  };
}

Trata de abstraerte del estado de formularios usando redux-form.

6
  • La verdad no me ha funcionado, me sigue dando el mismo error. Dejame ver si puedo subir un ejemplo a codesandbox.io para que veas mejor que ocurre.
    – Wilfredo
    Commented el 2 ago. 2017 a las 12:45
  • Me causa intriga ya que los reducers solo devuelven una copia actualizada del estado. Por ende, devolver el estado reemplazando un autor no debería significar ningún tipo de problema. Actualiza tu pregunta y añade tu componente por favor.
    – gugadev
    Commented el 2 ago. 2017 a las 14:06
  • Ya identifique el problema. Pero quiero hacer un test para colocarla. Es una locura, ya que era otro componente accediendo al state.
    – Wilfredo
    Commented el 2 ago. 2017 a las 14:11
  • Ya sospechaba algo; ten cuidado con despachar paralelamente a la misma porción del store. Como consejo, te recomiendo usar la librería recompose.
    – gugadev
    Commented el 2 ago. 2017 a las 14:20
  • Listo hice un update, pero me podrías explicar un poco mas al respecto, ademas coloque el full code (Esta en github)
    – Wilfredo
    Commented el 2 ago. 2017 a las 14:29
-1

Yo cambiaría el Object.assign({}, action.author) por JSON.parse(JSON.stringify(action.author))

Esto te realiza una copia en profundidad del objeto.

slds,

3
  • Estoy lo hice, pero lamentablemente no me sirve, considero que mi error de mutación esta en otro lugar. Voy a actualizar la pregunta con todo el código del app.
    – Wilfredo
    Commented el 2 ago. 2017 a las 14:03
  • JSON.parse(JSON.stringify(action.author)) es una operacion costosa que no deberia usarse, y menos cuando dependen actualizaciones de UI o se piensa ejecutar muchas veces, como puede suceder en una aplicacion react-redux.
    – Cristyan
    Commented el 22 ago. 2017 a las 3:06
  • Ten en cuenta que el clonado es en profundidad, por lo que ha probado en los browsers más modernos, tienes razón, este método no es el más eficiente. Aquí se puede probar si gustan: jsben.ch/bWfk9 Saludos !! Commented el 24 ago. 2017 a las 13:50

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.