Блог

Мы используем MongoDB и redux в нашем проекте. Когда мы переходим на страницу, получаем идентификатор плеера, который мы хотим получить из магазина redux, и передаем его компоненту. На скриншоте ниже показана моя консоль.войдите в этот магазин с идентификатором, который мы получили. Мы также получаем атрибуты игрока и детали. Странно то, что мы не можем видеть наш результат на странице. Но если мы вернемся и снова войдем на страницу и сделаем это ровно три раза, то получим результат. Я использовал консоль.войдите в журнал для отслеживания, и я вижу, что при загрузке одной страницы я получил эту консоль.журнал s три раза. Это очень странная проблема, и мы не могли понять, почему это происходит. Это из-за навигации, исправления или чего-то еще? Я вставляю вывод на одну страницу загрузки под кодом.

 const { id } = route.params;
console.log(" on players detail page id is: "   id);

const dispatch = useDispatch();

useEffect(() => {
    dispatch(playerCardActions.getPlayerCardInfo(id));
    dispatch(playerAttributeActions.fetchPlayerAttributes(id));
}, [dispatch]);

const playerCard = useSelector(
    (state) => state.playerCardStore.selectedPlayerCard
);
console.log(" on players detail page playercard is: "   playerCard);

const playerAttribute = useSelector(
    (state) => state.playerAttributeStore.selectedPlayerAttribute
);

console.log(" on players details page playerattr is: "   playerAttribute);
 

на странице сведений об игроках идентификатор: 604a8e1d83a1a09b8a61afb9

на странице сведений об игроках карточка игрока: [объект-объект],[объект-объект],[объект-объект],[объект-объект],[объект-объект]

на странице сведений об игроках playerattr: [объект объекта]

на странице сведений об игроках идентификатор: 604a8e1d83a1a09b8a61afb9

на странице сведений об игроках карта игрока: [объект объекта]

на странице сведений об игроках playerattr: [объект объекта]

на странице сведений об игроках идентификатор: 604a8e1d83a1a09b8a61afb9

на странице сведений об игроках карта игрока: [объект объекта]

on players details page playerattr is: [object Object]

Below you can find the store code

 import ReduxThunk from "redux-thunk";
import { applyMiddleware, combineReducers, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

import playerCardReducer from "./reducers/playerCard-reducer";
import playerAttributeReducer from "./reducers/playerAttribute-reducer";
import playerStatisticsReducer from "./reducers/playerStatistics-reducer";
import playerDetailsReducer from "./reducers/playerDetails-reducer";
import playerReducer from "./reducers/player-reducer";

const rootReducer = combineReducers({
    playerCardStore: playerCardReducer,
    playerAttributeStore: playerAttributeReducer,
    playerStatisticsStore: playerStatisticsReducer,
    playerDetailsStore: playerDetailsReducer,
    playerStore: playerReducer,
});

const middleware = composeWithDevTools(applyMiddleware(ReduxThunk));
export default createStore(rootReducer, middleware);
 

Я также добавляю один из приведенных ниже кодов редуктора

 import {
    CREATE_PLAYER_DETAILS,
    GET_DETAILS_OF_PLAYER,
    UPDATE_PLAYER_DETAILS,
} from "../actions/playerDetails-action";
import PlayerDetails from "../../models/PlayerDetails";

const initialState = {
    selectedPlayerDetails: null,
};

export default (state = initialState, action) => {
    switch (action.type) {
        case GET_DETAILS_OF_PLAYER:
            return { selectedPlayerDetails: action.selectedPlayerDetails };
        case CREATE_PLAYER_DETAILS:
            const newDetails = new PlayerDetails(
                action.selectedPlayerDetails.playerID,
                action.selectedPlayerDetails.phone,
                action.selectedPlayerDetails.email,
                action.selectedPlayerDetails.height,
                action.selectedPlayerDetails.weight,
                action.selectedPlayerDetails.playerCardId,
                action.selectedPlayerDetails.attributesId,
                action.selectedPlayerDetails.statisticsId
            );

            return (state.selectedPlayerDetails = newDetails);
        case UPDATE_PLAYER_DETAILS:
            const updatedDetails = new PlayerStatistics(
                action.selectedPlayerDetails.playerID,
                action.selectedPlayerDetails.phone,
                action.selectedPlayerDetails.email,
                action.selectedPlayerDetails.height,
                action.selectedPlayerDetails.weight,
                action.selectedPlayerDetails.playerCardId,
                action.selectedPlayerDetails.attributesId,
                action.selectedPlayerDetails.statisticsId
            );
            return (state.selectedPlayerDetails = updatedDetails);
    }
    return state;
};