Я новичок в React / Redux и работаю над приложением React. У меня есть следующий компонент:
request.jsx:
import React, { Component } from 'react';
import './request.styles.scss';
class Request extends Component {
render() {
return (
<div class="request-box">
<div class="request-details">
<div>
<h1>Table 8, 3:00PM</h1>
<h2>Request made 5 min ago.</h2>
</div>
<div class="status-button">
<button type="button" class="request-button">Assistance Requested</button>
</div>
</div>
</div>
);
}
}
export default Request;
Этот компонент отображается на следующей странице:
request-page.jsx
import React from 'react';
import { connect } from 'react-redux';
import Request from '../../components/request/request.component';
import './requests.scss';
function RequestListPage (props) {
return (
<div className="requests-page">
<h1>Requests</h1>
<div className="requests-container">
{props.requests ? props.requests.map(request => <Request />) : null}
</div>
</div>
)
}
const mapStateToProps = state => ({
requests: state.requests
})
export default connect(mapStateToProps)(RequestListPage);
В моей папке Redux у меня есть следующий код:
запросы.данных. js:
export default [
{
"id": 9,
"description": "Need assistance with the bill",
"status": "Completed"
},
{
"id": 2,
"description": "Need assistance with ordering",
"status": "Assistance Requested"
},
{
"id": 4,
"description": "Need assistance with the bill",
"status": "Assistance Requested"
}]
запросы.редуктор. js:
import INITIAL_STATE from './requests.data';
import { EDIT_REQUEST_STATUS } from './requests.types';
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EDIT_REQUEST_STATUS:
return state;
default:
return state;
}
}
rootReducer. js:
import userReducer from './user/user.reducer';
import requestsReducer from './requests/requests.reducer'
export default combineReducers({
user: userReducer,
requests: requestsReducer
})
Я хочу, чтобы мое приложение отображало информацию requests.data.js
на моей странице запросов. В настоящий момент в коде компонента Request в request.jsx
содержится жестко закодированная информация, поэтому все компоненты Request на странице отображают одну и ту же информацию.
Я хочу заменить эту жестко закодированную информацию, чтобы каждый запрос отображал свой уникальный идентификатор, описание и статус. Но я не уверен, что лучший способ сделать это. Любые идеи приветствуются.