Pass объект через ссылку в маршрутизатор реагировать

Question

Я нашел этот вопрос, который описывает именно то, что я искал ...

Pass object through Link in react router

Можно ли передать объект с помощью компонента Link в реагирующего маршрутизатор?

Что-то вроде:

<Link to='home' params={{myObj: obj}}> Click </Link> 

Точно так же, как я бы передать реквизит от родительского компонента ребенка.

Если это невозможно, то лучший способ достичь этого: У меня есть приложение React + Flux, и я делаю таблицу с некоторыми данными. То, что я пытаюсь сделать, - это когда я нажимаю на одну из строк, на которую мне потребуется часть деталей для этой строки. В строке есть все данные, которые мне нужны, поэтому я подумал, что было бы здорово, если бы я мог просто передать его через Link.

Другой вариант - передать идентификатор строки в URL-адресе, прочитать его в компоненте деталей и запросить данные из хранилища по идентификатору.

Не уверен, что это лучший способ достижения выше ...

Я согласен с выводом автора, что означает: вместо передачи объекта, мы должны передать идентификатор. Однако я борюсь с тем, где на следующем компоненте я должен выполнить этот поиск, возможно, в методе onload, где я определяю mapDispatchToProps.

Однако я не знаю, как получить доступ к состоянию оттуда, чтобы узнать, находится ли объект в состоянии, поэтому я могу получить его из вызова api, если он не находится в состоянии. Это принадлежит или в действии? Если он находится в действии, как мне его получить. Кажется, это будет очень простой шаблон, и я что-то упускаю.

Answer 1

Вы используете его с redux-thunk, и вы можете сделать действие для маршрутизатора.

Я имею в виду что-то вроде этого

export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState.params.game); 

Таким образом, вы можете видеть, я использую Params игру и изменить состояние с

export const reqStreams = game => { 

    const promise = new Promise((resolve, reject) => { 
    request 
     .get(`${config.ROOT_URL}/${game}&client_id=${config.API_KEY}`) 
     .end((err, res) => { 
     if (err) { 
      reject(err); 
     } else { 
      resolve(res.body.streams); 
     } 
     }); 
    }); 

    return { 
    type: types.RECEIVE_STREAMS, 
    payload: promise 
    }; 

}; 

Вот это мой редуктор, где я получил Params от маршрутизатора действие.

---

После того, как вам нужно сделать что-то подобное, вы связываете свое действие и делаете его объектом.

const boundRouteActions = bindActionCreators(routeActions, store.dispatch); 

И, наконец, в маршрутизаторе вы можете направить действие с OnEnter апи от среагировать-маршрутизатор

 <Route path=":game"> 
     <IndexRoute 
      component={StreamsApp} 
      onEnter={boundRouteActions.boundAllStreams} /> 
    </Route> 

Надежда, которая может помочь вам;). Я знаю, что я просто покажу вам код, но я уверен, что может помочь вам разобраться, как это реализовать;)