Как из redux store получить обьект из массива?

Всем привет, нужна помощь.
Занимаюсь изучением реакта и у меня возникли некие трудности.
Имеется небольшое приложение со списком работ, в качестве хранилища используется redux.
Данные берутся из локальной API, и выглядят примерно так

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);
        });
    }
}


Получить список работ у меня получилось и не возникло трудностей

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
};


Компонент списка работ

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);


В проекте использую react router, собственно остановился на том, что не могу понять как правильно получить конкретную работу и вывести на отдельную страницу. Сам компонент готов, из react router делаю редирект на страницу с нужным id. В props нового компонента получаю этот id. Не знаю как достать из redux store нужный обьект и передать его в компонент детальной страницы.

Буду очень благодарен, если хотя бы на словах скажите как реализовать это. Заранее спасибо
  • Вопрос задан
  • 277 просмотров
Решения вопроса 2
Отдельные объекты обычно получают по его id отдельным запросом на сервер. Почему?
  1. Потому что в реальных приложениях списки могут быть очень длинными, поэтому они достаются с сервера не целиком, а постранично, с пагинацией. Естественно нужного объекта на текущей странице может не оказаться, поэтому его лучше сразу брать с сервера.
  2. Потому что данных в списке может быть не достаточно для страницы с одним объектом. Списки обычно бывают облегчены для производительности и могут содержать только те поля, которые нужно показать именно в списке.

Кроме того, в настоящем приложении страница с одним объектом должна работать независимо от того, заходил ли пользователь до этого на страницу списка или нет. То есть каждая страница должна получать все нужные данные независимо от других страниц.
Ответ написан
hzzzzl
@hzzzzl
то есть есть id, и есть массив data?

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

data.find(d => d.id === 2) 
// {id: 2, title: "Performance", description: "Description of Performance project", content: "<span>Test<span> content for work item"}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы