javascript - MERN 和 Redux : How do you pass Redux state data from Index to Show page?

Question

--简短版本我的索引页面是所有锦标赛的列表。每个都有一个按钮，单击即可转到该锦标赛的页面。在每个锦标赛的索引中，我都有一个按钮，其中包含 onClick={} 在 Redux 中选择锦标赛数据的操作。

如何在下一页上正确访问该状态数据？

--长版我有一个锦标赛模型，在后端编写了一堆用于完整 CRUD 的快速路线。

我还写了redux..我得到了索引页面(数据库中所有锦标赛的列表)我将展示我的 GET ALL TOURRNAMENTS 代码，以便您可以了解我如何过渡到创建 SHOW ONE TOURNAMENT 代码。

后端 ExpressJS 路由

// @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));
});

reducer

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 内容

快速路线

// @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" }));
});

reducer

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)));
};

我是否只需要为此创建一个新的 reducer ？我可以看到该州显示的锦标赛。在前端，我尝试从 State 中提取该数据，以便我可以使用 PropTypes 渲染数据。

我不想让这篇文章变得很长，但我会把我的显示文件放在这里，这样一切都会公开

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);

谢谢大家

Answer 1

如果您有该州的锦标赛数据，您可以直接使用以下方法获取该数据 this.props，并使用 TournamentShow 类中的 componentDidUpdate 函数。您可以验证该值是否已更新，在下一个示例中，我将使用 equals 库来比较锦标赛属性的值:

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