Как управлять состоянием между маршрутизатором React и Redux

Question

У меня есть данные, которые я получаю из API, хранящегося как items,

{ '001': {id: '001', name:'foo',color:'blue' }}, '002': { id: '002',name:'bar',color:'orange' }, '003': { id: '003',name:'baz',color:'pink' }}

, который будет добавлен в мое дерево состояний редуксов и определит, что будет отображаться на конкретном пути.Например, переход на /foo будет направлять пользователя на страницу с цветом фона соответствующего цвета, blue.У меня есть некоторый код, который я начал пытаться реализовать, но не совсем понимаю, как мне это согласовать.Я рассматривал возможность выполнения чего-то вроде запуска Object.keys(props.items).find(id => props.items[id].name === match.params.name), но подумал, что это не будет супермасштабируемым решением и приведет к потере поиска O (1), обеспечиваемого наличием объекта.Код здесь: https://codesandbox.io/s/n562wzzmkm

Answer 1

Если вы хотите использовать свойство name в качестве пути к каждому элементу, то упомянутый вами метод сопоставления (поиска / поиска), на мой взгляд, вероятно, является наилучшим вариантом.Поскольку name ниже на один уровень для каждого элемента, мы должны найти все наши элементы на соответствие match.params.id onClick, чтобы отобразить компонент <Detail/> s с правильными данными элемента.

Но, если вы открыты для этого, я бы предложил вам использовать ключ верхнего уровня каждого элемента (т. Е. 001, 002, 003) в качестве реквизита to для вашего сопоставленного <Link/> компоненты.Таким образом, мы все еще можем достичь O (1), используя этот метод в сочетании с опорой render для вашего <Route/>, который обрабатывает рендеринг компонента <Detail/> с данными выбранного элемента.Мы по-прежнему будем выполнять поиск, используя match.params.id, но нам нужно будет только взглянуть на верхний уровень items, чтобы найти правильный элемент и успешно установить правильный цвет фона.

Кодвопрос ниже и ответвление вашего CodeSandbox: https://codesandbox.io/s/xl8von46nw?fontsize=14

/**** Setting each to prop equal to the top-level id for each item ****/

  <ul>
    {Object.keys(items).map(id => (
      <li key={id}>
        <Link to={id}>item {items[id].name}</Link>
      </li>
    ))}
  </ul>

/**** I used connect() in routes.js to access items ****/

  <Route
    path="/:id"
    render={({ match }) => (
      <Detail
        item={items[match.params.id]}
      />
    )}
  />

Надеюсь, что это поможет или является приемлемым решением!