Как сохранить данные в сетке меню в приложении React-Redux?

Question

Я создаю приложение в React-Redux, где вы входите в систему как пользователь без пароля или токена, просто аутентифицируя пользователя, а затем вы можете просмотреть в домашних условиях (/) неотвеченные или отвеченные вопросы, такие как следующее:

Если я перейду непосредственно к меню доски лидеров (/ Leaderboard), мне кажется, что это так:

Проблема в том, что, например, дома я выбираю просмотр опроса (либо в «Вопросах без ответов», либо в «Ответах на вопросы»), обычно мне кажется, что следующее:

И если я выберу go на экране опроса непосредственно в меню «Таблица лидеров», это будет выглядеть неправильно так:

Вопрос в том, как сохранить или сохранить данные, которые должны появиться в маршруте таблицы лидеров, независимо, если я выберу go непосредственно в меню доски лидеров. только в тот момент, когда я получаю доступ к дому или если я решу сначала выполнить опрос, а затем я go в меню доски лидеров?

Я пытался выяснить с помощью списков лидеров. js и QuestionView. js моего проекта, но не смог Я не думаю, что в любом хорошем решении.

Я построил веб-приложение в codesandbox, чтобы вы могли просмотреть и смоделировать то, что я испытываю, и вы можете получить доступ по следующей ссылке:

https://sit9d.csb.app/

Я подозреваю, что проблема в Leaderboard. js, код которого я здесь ниже:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    Card,
    Image,
    Label,
    Grid
} from 'semantic-ui-react'

class Leaderboard extends Component {
    cardItemsPerRow = 3

    render() {
        const { users } = this.props

        const awardColors = ['red', 'orange', 'yellow']
        let rank = 0
        let rankSuffix = ['st', 'nd', 'rd']

        const usersWithScore = {}
        Object.keys(users).forEach((uid) =>{
            const user = users[uid]
            const answeredQuestions = Object.keys(user.answers).length
            const createdQuestions = user.questions.length
            user.score = answeredQuestions + createdQuestions
            usersWithScore[uid] = user
        })

        const usersWithScoreSorted = {}
        Object.keys(users)
            .map((uid) => users[uid])
            .sort((a, b) => b.score - a.score)
            .forEach((user) => {
                usersWithScoreSorted[user.id] = user
            })

        const userCards = Object.keys(usersWithScoreSorted).map((uid) => {
            const user = usersWithScoreSorted[uid]
            let label = null
            let awardColor = awardColors[rank++]
            if (awardColor) {
                label = {
                    as: 'div',
                    corner: 'left',
                    icon: 'trophy',
                    color: awardColor
                }
            }
            const answeredQuestions = Object.keys(user.answers).length
            const createdQuestions = user.questions.length
            const score = answeredQuestions + createdQuestions

            return (
                <Card key={uid}>
                <Image src={user.avatarURL} label={label} />
                <Card.Content>
                    <Card.Header>{user.name}</Card.Header>
                    <Card.Meta>
                        Rank{' '}
                        <Label size='tiny'>
                        {rank}
                        {rankSuffix.shift() || 'th'}
                        </Label>
                    </Card.Meta>
                    <Card.Description>
                        <Grid columns={2} divided style={{ fontSize: '1rem' }}>
                            <Grid.Row>
                                <Grid.Column floated='left' width={11}>
                                    Answered: {answeredQuestions}
                                    <br />
                                    Created: {createdQuestions}
                                </Grid.Column>
                                <Grid.Column floated='right' width={5}>
                                    <div>
                                        <strong>score</strong>
                                    </div>
                                    <Label circular color={awardColor} size='large'>
                                        {score}
                                    </Label>
                                </Grid.Column>
                            </Grid.Row>
                        </Grid>
                    </Card.Description>
                </Card.Content>
            </Card>
            )
        })
        return (
            <Card.Group itemsPerRow={this.cardItemsPerRow}>{userCards}</Card.Group>
        )
    }    
}

const mapStateToProps = (state) => {
    return { users: state.users }
}

export default connect(mapStateToProps)(Leaderboard)

Пожалуйста, если вы могли бы помочь Я в пути, чтобы найти лучшее решение, я был бы благодарен.

С уважением.