javascript - from - jquery get title



Как обрабатывать древовидные объекты в редукторах Redux? (2)

Официальное решение этой проблемы - использовать github.com/gaearon/normalizr для сохранения вашего состояния следующим образом:

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

Вы правы, что вам нужно было бы connect() компонент Comment чтобы каждый мог рекурсивно запрашивать интересующие его children элементы из хранилища 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;

Мы думаем, что это хороший компромисс. Вы передаете comment как реквизит, но компонент извлекает childrenComments из магазина.

Я немного застрял, размышляя о том, как реализовать редуктор, в котором у его сущностей могут быть дети одного типа.

Давайте возьмем комментарии reddit в качестве примера: каждый комментарий может иметь дочерние комментарии, которые могут иметь комментарии сами по себе и т. Д. Для упрощения комментарий представляет собой запись типа {id, pageId, value, children} , где pageId является страницей reddit.

Как можно смоделировать редуктор вокруг этого? Я думал о том, чтобы редуктор был картой -> id комментариев, где вы можете фильтровать по странице, используя pageId .

Проблема в том, что, например, когда мы хотим добавить комментарий к вложенному: нам нужно создать запись в корне карты, а затем добавить ее идентификатор в свойстве родительских детей. Чтобы отобразить все комментарии, нам нужно получить их все, отфильтровать те, которые у нас есть вверху (которые будут храниться в редукторах страниц, например, в виде orderList), а затем выполнить итерацию по ним, выбирая объекты комментариев, когда мы встречаем детей с помощью рекурсии.

Есть ли лучший подход, чем это, или это недостатки?


Структура вашего хранилища (редуктора) может отличаться от желаемой модели представления (которую вы передаете в качестве подпорки компонентам). Вы можете просто сохранить все комментарии в массиве и отобразить их в виде дерева по ссылкам в mapStateToProps на высокоуровневом «умном» компоненте. Вы получите простое управление состоянием в редукторе и удобную модель представления для работы с компонентами.





redux