How to pass the necessary data from the redux store to the internal components?

Question

React

Good afternoon! Tell me, please - how to correctly transfer only the necessary data to the internal components.
Learning from kanban boards. In the redux store - there is the following data

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'
}]

In the component where I display the list of projects - everything is clear - I take all the projects from the store:

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

Now when I go to a specific project, I would like that component to have only its own project - based on the id that comes from the router. I would like something like this (I understand that this is nonsense, since the connection works on export, and not on rendering the object):

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

export default connect(putStateToProps)(TasksColumnsList);

So far, I see only two solutions:

01. Pass data directly to the component through props, without binding to the store already in the inner
02. Also bind the entire store, and in the render, look for the desired object in the entire store by id. But I don't like the logic that a component of one project has the data of all projects.

Tell me how to do it right? Thanks

Answer 1

mapStateToProps has a second argument - props of the component, get the id from there:

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