javascript - que - ¿Cómo manejar entidades con forma de árbol en reductores redux?

html dom javascript tutorial

Question

Estoy un poco atascado pensando en cómo implementar un reductor donde sus entidades puedan tener hijos del mismo tipo.

Tomemos los comentarios de reddit como ejemplo: cada comentario puede tener comentarios secundarios que pueden tener comentarios, etc. Por razones de simplificación, un comentario es un registro de tipo {id, pageId, value, children} , con pageId como reddit.

¿Cómo se podría modelar el reductor alrededor de eso? Estaba pensando en hacer que el reductor fuera un mapa -> ID de los comentarios donde se puede filtrar por página usando el pageId página.

El problema es que, por ejemplo, cuando deseamos agregar un comentario a uno anidado: necesitamos crear el registro en la raíz del mapa y luego agregar su ID en la propiedad de los padres. Para mostrar todos los comentarios, deberíamos obtenerlos todos, filtrar los que tenemos en la parte superior (que se mantendrían en los reductores de páginas como una lista ordenada, por ejemplo) y luego iterarlos, buscar los objetos de comentarios cuando Nos encontramos con niños utilizando la recursión.

¿Hay un mejor enfoque que eso o es defectuoso?

Answer 1

La estructura de su tienda (reductor) podría diferir de su modelo de vista deseado (uno que pase como accesorios a los componentes). Simplemente puede mantener todos los comentarios en la matriz y asignarlos a un árbol mediante enlaces en mapStateToProps en el componente "inteligente" de alto nivel. Obtendrá una administración de estado simple en reductor y un práctico modelo de vista para los componentes con los que trabajar.

Answer 2

La solución oficial para esto es usar github.com/gaearon/normalizr para mantener su estado así:

{
  comments: {
    1: {
      id: 1,
      children: [2, 3]
    },
    2: {
      id: 2,
      children: []
    },
    3: {
      id: 3,
      children: [42]
    },
    ...
  }
}

Tienes razón en que necesitarías connect() el componente Comment para que cada uno pueda consultar de forma recursiva a los children que está interesado en la tienda Redux:

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    childComments: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired
  },

  render() {
    return (
      <div>
        {this.props.comment.text}
        {this.props.childComments.map(child => <Comment key={child.id} comment={child} />)}
      </div> 
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    childComments: ownProps.comment.children.map(id => state.comments[id])
  };
}

Comment = connect(mapStateToProps)(Comment);
export default Comment;

Creemos que este es un buen compromiso. Pasas comment como prop, pero el componente recupera childrenComments de la tienda.