Всем привет, нужна помощь.
Занимаюсь изучением реакта и у меня возникли некие трудности.
Имеется небольшое приложение со списком работ, в качестве хранилища используется 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 нужный обьект и передать его в компонент детальной страницы.
Буду очень благодарен, если хотя бы на словах скажите как реализовать это. Заранее спасибо
Простой