Javascript Redux - как получить элемент из хранилища по id

В течение последних недель я пытался узнать React и Redux. Теперь я столкнулся с проблемой, я не нашел правильного ответа.

Предположим, у меня есть страница в React, которая получает реквизиты из ссылки.

const id = this.props.params.id;

Теперь на этой странице я хотел бы отобразить объект из STORE с этим идентификатором.

 const initialState = [
      {
        title: 'Goal',
        author: 'admin',
        id: 0
      },
      {
        title: 'Goal vol2',
        author: 'admin',
        id: 1
      }
    ]

Мой вопрос: если функция запроса объекта из хранилища должна быть в файле страницы, перед методом рендеринга или я должен использовать создателей действий и включить функцию в редукторы. Я заметил, что редукторы, как представляется, содержат только действия, которые имеют impoact на магазине, но мой просто запрашивает хранилище.

Спасибо заранее.

Ответы

Ответ 1

Вы можете использовать функцию mapStateToProps для запроса хранилища при подключении компонента к сокращению:

import React from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';

const Foo = ({ item }) => <div>{JSON.stringify(item)}</div>;

const mapStateToProps = (state, ownProps) => ({
  item: _.find(state, 'id', ownProps.params.id)
});

export default connect(mapStateToProps)(Foo);

(В этом примере используется lodash - _)

Функция mapStateToProps принимает все состояние редукции и реквизиты вашего компонента, и из этого вы можете решить, что отправить в качестве реквизита для своего компонента. Поэтому, учитывая все наши элементы, найдите тот, у которого идентификатор совпадает с нашим URL.

https://github.com/rackt/react-redux/blob/master/docs/api.md#arguments