Как передавать нужные данные из redux store во внутренние компоненты?

Question

[Айдар Хаятов]

Добрый день! Подскажите, пожалуйста - как правильно передавать только нужные данные во внутренние компоненты.
Учусь на примере kanban доски. В redux store - есть следующие данные

const initialState = [{
    id: 1,
    name: 'Project 1',
    columns: [{
        'id': 1,
        'name': 'New'
    },{
        'id': 2,
        'name': 'In Work'
    },{
        'id': 3,
        'name': 'Done'
    }]
},{
    id: 2,
    name: 'Project 2'
}]

В компоненте где я вывожу список проектов - все понятно - беру из стора все проекты:

const putStatesToProps = state => {
    return {
        projects: state.projects
    }
}
export default connect(putStatesToProps)(ProjectsList);

Теперь когда я перехожу в конкретный проект, я бы хотел чтобы этот компонент имел только свой project - на основании id который приходит от роутера. Хотелось бы как то так (я понимаю что это глупость так как коннект срабатывает на экспорте, а не на рендере объекта):

const putStateToProps = state => {
    let projectId = this.props.match.params.projectId;
    return {
        ... тут выборка из общего стейта конкретного по id
    }
}

export default connect(putStateToProps)(TasksColumnsList);

Я вижу пока только два решения:

01. Передавать через props уже непосредственно данные в компонент, без привязки к стору уже во внутреннем
02. Также привязывать весь стор, и в рендере уже во всем сторе по id искать нужный объект. Но мне не нравится логика, что компонент одного проекта имеет данные всех проектов.

Подскажите, как делать верно? Спасибо

Answer 1

[0xD34F]

У mapStateToProps есть второй аргумент - props компонента, доставайте id оттуда:

(state, ownProps) => {
  const { projectId } = ownProps.match.params;
  ...
}