How to get an object from an array from redux store?

Question

React

Hello everyone, I need help.
I'm learning React and I'm having some trouble.
There is a small application with a list of works, redux is used as storage.
The data is taken from the local API and looks something like this

export default class DataService {
    data = [
        {
            id: 1,
            title: 'NubeUnique',
            description: 'Description of NubeUnique project',
            content: '<span>Test<span> content for work item'
        },
        {
            id: 2,
            title: 'Performance',
            description: 'Description of Performance project',
            content: '<span>Test<span> content for work item'
        },
        {
            id: 3,
            title: 'Tabu',
            description: 'Description of Tabu project',
            content: '<span>Test<span> content for work item'
        }
    ];

    getWorks(){
        return new Promise((resolve, reject) =>{
            setTimeout(() => {
                resolve(this.data)
            }, 1000);
        });
    }
}

I succeeded in getting a list of works and there were no difficulties
Reducers

import {
    FETCH_WORKS_SUCCESS,
    FETCH_WORKS_REQUEST,
    FETCH_WORKS_FAILURE,
} from '../constants';

const initialState = {
    works: [],
    loading: true,
    error: null,
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_WORKS_REQUEST:
            return {
                works: [],
                loading: true,
                error: null
            };
        case FETCH_WORKS_SUCCESS:
            return {
                works: action.payload,
                loading: false,
                error: null
            };
        case FETCH_WORKS_FAILURE:
            return {
                works: [],
                loading: false,
                error: action.payload
            };
            
        default:
            return state;
    }
};

export default reducer;

Actions

import {
    FETCH_WORKS_SUCCESS,
    FETCH_WORKS_REQUEST,
    FETCH_WORKS_FAILURE,

} from '../constants';

const worksRequested = () => {
    return {
        type: FETCH_WORKS_REQUEST
    }
};

const worksLoaded = (newWorks) => {
    return {
        type: FETCH_WORKS_SUCCESS,
        payload: newWorks
    };
};

const worksError = (error) => {
    return {
        type: FETCH_WORKS_FAILURE,
        payload: error
    };
};

const fetchWorks = (dataService, dispatch) => () => {

    dispatch(worksRequested());

    dataService.getWorks().then((data) => {
        dispatch(worksLoaded(data));
    }).catch((error) => dispatch(worksError(error)));
};


export {
    fetchWorks
};

Work List Component

import React, {Component} from 'react';
import './works-list.scss';
import WorksListItem from '../works-list-item';
import {connect} from "react-redux";
import WithDataService from '../hoc';
import {fetchWorks} from '../../actions';
import {compose} from '../../utils';
import Spinner from "../spinner";
import ErrorIndicator from "../error-indicator";

class WorksList extends Component {

    componentDidMount() {
        this.props.fetchWorks();
    }

    render() {

        const {works, loading, error} = this.props;

        if(loading) {
            return <Spinner/>
        }

        if(error){
            return <ErrorIndicator/>
        }

        return (
            <div>
                {
                    works.map((work) => {
                       return (
                           <WorksListItem key={work.id} work={work}/>
                       );
                    })
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        works: state.works,
        loading: state.loading,
        error: state.error
    }
};


const mapDispatchToProps = (dispatch, ownProps) => {
    const {dataService} = ownProps;

    return {
        fetchWorks: fetchWorks(dataService, dispatch)
    }
};

export default compose(
    WithDataService(),
    connect(mapStateToProps, mapDispatchToProps)
)(WorksList);

In the project I use react router, actually I stopped at the fact that I can’t understand how to get a specific job correctly and display it on a separate page. The component itself is ready, from react router I redirect to the page with the desired id. In the props of the new component, I get this id. I don’t know how to get the required object from the redux store and pass it to the detail page component.
I would be very grateful if at least in words tell me how to implement this. Thanks in advance

Answer 1

Individual objects are usually obtained by their id in a separate request to the server. Why?
Also, in a real application, the single object page should work whether the user has previously visited the list page or not. That is, each page should receive all the necessary data independently of other pages.

Answer 2

The proxie s parameter expects a dictionary as an argument, and you pass it a tuple. The easiest way to fix your code is:

if requests.get(url, proxies=dict([i]), headers=headers).status_code == 200: