React Redux: как динамически отображать данные на экране?

Question

В моем приложении есть две модели: User и Tournament.

С Redux у меня есть конфигурация Action / Reducer, которая добавляет объект пользователя к объекту Tournament в виде массива. Таким образом, турнир может иметь массив пользователей (участников)

В компоненте у меня есть функция, которая вызывает действие redux для добавления пользователя в турнир

Вот мой компонент, включая функцию для добавления пользователей в турнир и того, как все это отображается на экране.

class TournamentShow extends Component {
    constructor(props) {
        super(props);
        this.onSignUp = this.onSignUp.bind(this);
        this.state = {
            participants: []
        };
    };

    static propTypes = {
        tournament: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired
    };

    onSignUp(tournamentId, user) {
        this.props.addParticipant(tournamentId, user);
    };

    render() {
        const { _id, title, hostedBy, status, participants } = this.props.tournament.showTournament;
        const { isAuthenticated, user } = this.props.auth;
        return (
            <div>
                <h1>{ title }</h1>
                <h3> <TournamentDescription key={_id} title={ title } /> </h3>
                <p>Hosted by: { hostedBy }</p>
                <p>status: { status }</p>
                <p>Registered Fighters:</p>
                <ul>
                    {
                        participants && participants.map(participant => (
                            <li key={participant._id}>{participant.username}</li>
                        ))
                    }
                </ul>
                {
                    status === "Open" && isAuthenticated ?
                    <TournamentSignUp
                        participants={participants}
                        userId={user._id}
                        onClick={() => this.onSignUp(_id, user)} 
                    /> :
                    <Button block disabled>Log in to sign up for this tournament</Button>
                }
                <br/><Link to="/">Back to Tournaments main page</Link>
            </div>
        )
    }
};

const mapStateToProps = state => ({
    tournament: state.tournament,
    auth: state.auth
});

export default connect(mapStateToProps, { showTournament, addParticipant })(TournamentShow);

Я добавил State в компонент класса, потому что я считаю, что мне нужно что-то сделать с этим

Он работает достаточно хорошо. Он добавляет пользователей в турнир в качестве «участников», но мне нужно обновить sh страницу, чтобы она отображалась на экране.

Есть ли способ сделать это так, чтобы DOM обновлялся динамически?

Answer 1

Поскольку вы могли пропустить некоторые части кода, я не уверен, использовали ли вы mapStateToProps в своем классе.

Идея этого mapStateToProps состоит в том, что любые изменения в перечисленных переменных будет принудительно выполнить повторный рендеринг вашего компонента.

Basi c реализация выглядит следующим образом:

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

Любые изменения в вашей переменной todos в вашем redux вызовут рендеринг в вашем компонент.

Дополнительную информацию можно найти в этой документации: https://react-redux.js.org/using-react-redux/connect-mapstate

Вы также можете принять к сведению эту проблему . Это также может быть причиной того, что ваш экран не обновляется динамически. Как упоминалось в ответе на предыдущий вопрос:

MapStateToProps выполняет поверхностное сравнение значений, возвращаемых каждый раз. При поверхностном сравнении будут сравниваться ссылки для объектов и массивов.