React-Redux: отображение данных из исходного состояния в компонентах - PullRequest
0 голосов
/ 01 апреля 2020

Я новичок в 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 на странице отображают одну и ту же информацию.

Я хочу заменить эту жестко закодированную информацию, чтобы каждый запрос отображал свой уникальный идентификатор, описание и статус. Но я не уверен, что лучший способ сделать это. Любые идеи приветствуются.

1 Ответ

0 голосов
/ 01 апреля 2020

хорошо, если я вас правильно понял, все, что вам нужно, это передать ваш запрос в качестве опоры вашему компоненту 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 request={request}/>) : null}
            </div>
        </div>
    )
}

const mapStateToProps = state => ({
    requests: state.requests
})

export default connect(mapStateToProps)(RequestListPage);

и в вашем "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{this.props.id}, 3:00PM</h1>
                      <h2>{this.props.description}</h2>
                    </div>
                    <div class="status-button">
                        <button type="button" class="request-button">{this.props.status}</button>
                    </div>
                </div>
            </div>
        ); 
    }
}

  Request.defaultProps = {
  id: "8",
  description: "Request made 5 min ago.",
  status:"Assistance Requested"

};
export default Request;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...