Setting initialState using createEntityAdapter: A

Feedback


Question:

As someone who is new to React/Redux, I am currently developing a React application and have encountered the following component:

request.jsx:

import React, { Component } from 'react';
import './request.styles.scss';
class Request extends Component {
    render() {
        return (
            

Table 8, 3:00PM

Request made 5 min ago.

); } } export default Request;

The following page exhibits this particular component.

requests-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 (
        

Requests

{props.requests ? props.requests.map(request => ) : null}
) } const mapStateToProps = state => ({ requests: state.requests }) export default connect(mapStateToProps)(RequestListPage);

Within my Redux directory, the code I possess includes the subsequent elements:
“””.

requests.data.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"
    }]

requests.reducer.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
})

In my Requests page, I desire for my application to display the information

requests.data.js

. Currently, the code for
Request component
in

request.jsx

has hardcoded information, causing all the
Request components
on the page to show the same information.

I am seeking a solution to replace the hardcoded information for each
request displays
, ensuring that each has its own distinct id, description, and status. However, I am uncertain about the most optimal approach for achieving this. Any suggestions or insights would be greatly appreciated.


Solution:

If I understand correctly, what you need is to pass your request as a prop to the Request component. This means that in your “requests-page.jsx” file, you should…

import React from 'react';
import { connect } from 'react-redux';
import Request from '../../components/request/request.component';
import './requests.scss';
function RequestListPage (props) {
    return (
        

Requests

{props.requests ? props.requests.map(request => ) : null}
) } const mapStateToProps = state => ({ requests: state.requests }) export default connect(mapStateToProps)(RequestListPage);

and in your “request.jsx:”:

import React, { Component } from 'react';
import './request.styles.scss';
class Request extends Component {
    render() {
        return (
            

Table{this.props.id}, 3:00PM

{this.props.description}

); } } Request.defaultProps = { id: "8", description: "Request made 5 min ago.", status:"Assistance Requested" }; export default Request;

Frequently Asked Questions