MERN & Redux: Как вы передаете данные о состоянии Redux из Index на страницу Show? - PullRequest
Новая
       70

MERN & Redux: Как вы передаете данные о состоянии Redux из Index на страницу Show?

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

- КРАТКАЯ ВЕРСИЯ На моей странице указателя есть список всех турниров. У каждого есть кнопка, которую вы нажимаете, чтобы go перейти на страницу этого турнира. В Индексе каждого турнира у меня есть кнопка с onClick={} действием, которое выбирает данные турниров в Redux.

Как правильно получить доступ к данным состояния на следующей странице?

- ДЛИННАЯ ВЕРСИЯ У меня есть модель Турнира с набором express маршрутов, написанных в бэкэнде для полного CRUD.

У меня также есть выписанный излишек .. Я получил страницу Index (список всех турниров) в БД) Я покажу свой код GET ALL TOURNAMENTS, чтобы вы могли увидеть, как я перешел к созданию кода SHOW ONE TOURNAMENT.

BackEnd ExpressJS route 

// @route       GET /tournaments
// @descrip Get All, INDEX
// @access  Public
router.get('/', (req, res) => {
    Tournament.find()
        .sort({ date: -1 })
        .then(tournaments => res.json(tournaments))
        .catch(err => console.log(err));
});

Редуктор 

const initialState = {
    tournaments: [],
    loading: false
}


case GET_TOURNAMENTS:
    return {
        ...state,
        tournaments: action.payload,
        loading: false
    };

Действие 

export const getTournaments = () => dispatch => {
    dispatch(setTourneysLoading()); 
    axios
        .get('/tournaments')
        .then(res => dispatch({
            type: GET_TOURNAMENTS,
            payload: res.data
        }))
        .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
};

Все в порядке .. спасибо за ваше терпение! Вот что у меня есть для SHOW

Express Route 

// @route   SHOW /tournaments/:id
// @descrip Display a single tournament
// @access  Public
router.get('/:id', (req, res) => {
    Tournament.findById(req.params.id)
        .then(tournament => res.json(tournament))
        .catch(err => res.status(404).json({ msg: "Tournament not found" }));
});

Редуктор 

case DISPLAY_TOURNAMENT:
    return {
        ...state,
        // Iterate through tournaments to find one that matches payload
        tournaments: state.tournaments.map(tournament => tournament._id === action.payload ?
            // display that tournament
            { tournament } :
            // else, display nothing
            null
        ),
        loading: false
    };

Действие 

export const showTournament = id => dispatch => {
    dispatch(singleTourneyLoading());   
    axios
        .get(`/tournaments/${id}`)
        .then(() => dispatch({
            type: DISPLAY_TOURNAMENT,
            payload: id
        }))
        .catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
};

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

Я не хотел делать этот огромный пост, но я выложу свой файл Show здесь, чтобы все было открыто 

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import TournamentDescription from './descriptions';
import { showTournament } from '../../actions/tournamentActions';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
class TournamentShow extends Component {
    componentDidMount() {
        this.props.showTournament(this.props.tournament._id);
    };
    static propTypes = {
        showTournament: PropTypes.func.isRequired,
        tournament: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired
    };
    render() {
        const { _id, title, hostedBy, status, participants } = this.props.tournament;
        return (
            <div>
                <h1>{ title }</h1>
                <h3> <TournamentDescription key={_id} title={ title } /> </h3>
                <p>status: { status }</p>
                <p>Registered Fighters:
                    {
                        participants.map((participant, index) => {
                            return (
                                <ul key={ index }>
                                    <li>{ participant }</li>
                                </ul>
                            )
                        })
                    }
                </p>
                <p>Hosted by: { hostedBy }</p>
                <Link to="#">Sign Up</Link>
                <Link to="/">Back to Tournaments main page</Link>
            </div>
        )
    }
};
const mapStateToProps = state => ({
    tournament: state.tournament.tournaments[0],
    auth: state.auth
});
export default connect(mapStateToProps, { showTournament })(TournamentShow);

Спасибо, ребята

1 Ответ

1 голос
/ 26 апреля 2020

Если у вас есть данные tournament в состоянии, вы можете получить эти данные напрямую, используя this.props, а также используя функцию componentDidUpdate в классе TournamentShow. Вы можете проверить, обновлено ли значение, в следующем примере я использую библиотеку equals для сравнения значения свойства турнира: 

componentDidUpdate(prevProps) {
    if(!equal(this.props.tournament, prevProps.tournament)) {
      //Some operations with tournament value
    }
  }
...