反應 Redux state 在調用 useDispatch() 后沒有改變

Question

我正在嘗試在我的基於網絡的游戲中使用更新版本的 react redux v8.0.2來將 state 保留在我的應用程序中，而不必在導航調用之間傳遞狀態。

不幸的是，我遇到了一個問題，即播放器 state 第一次被初始化，但最終的 state 在調用useDispatch()方法后沒有更新。 我試過在網上到處尋找，但目前沒有一個解決方案真正解決了我的問題。

我什至強制我的功能組件重新渲染，這仍然只是返回我的播放器的初始 state，而不是我期望的更新的。 誰能幫我弄清楚我在這里缺少什么。 它必須是 redux 表格/文檔中未提及的小問題。 蒂亞！

playerSlice.js

import {createSlice} from '@reduxjs/toolkit';

export const playerSlice = createSlice({
    name: 'player',
    initialState: {
        address: '',
        cp: 0,
        created: '',
        faction: 0,
        faction_selected: false,
        games_lost: 0,
        games_won: 0,
        online: false,
        selected_char: 0,
        selected: {
            combatType: '',
            lvl: 0,
            mgc: 0,
            str: 0,
            rng: 0,
            def: 0
        },
        time_played: 0,
        tokens: 10000,
        total_cp: 0,
        total_earned: 0,
        user_name: ""
    },
    reducers: {
        setInit: (state,action) => {
            state = action.payload;
        },
        setCP: (state,action) => {
            state.cp += action.payload;
        },
        setFaction: (state,action) => {
            state.faction = action.payload;
        },
        setGamesLost: (state,action) => {
            state.games_lost = action.payload;
        },
        setGamesWon: (state,action) => {
            state.games_won = action.payload;
        },
        setPlayerState: (state,action) => {
            state = {
                ...state,
                ...action.payload
            }
        }
    }
});

export const {setInit, setCP, setFaction, setGamesLost, setGamesWon, setPlayerState} = playerSlice.actions;

export const selectPlayer = (state) => state.player;

export default playerSlice.reducer;

index.js

import {configureStore} from '@reduxjs/toolkit';
import playerReducer from '../store/playerSlice';

export default configureStore({
    reducer: {
        player: playerReducer,
    },
})

選擇.js

import Card from './Card';
import React, {useState, useEffect} from 'react';
import '../stylesheet/Selection.css';
import Logo from '../assets/degen age title GNW skull.png';
import KnightTitle from '../assets/knights title.png';
import GoblinTitle from '../assets/goblins title.png';
import WizardTitle from '../assets/wizards title.png';
import ElfTitle from '../assets/elves title.png';
import SorcererShield from '../assets/sorcerers shield item.jpg';
import Weaken from '../assets/weaken item img.jpg';
import Barrage from '../assets/barrage item img.jpg';
import Berserk from '../assets/berserk item img.jpg';
import {db} from '../firebase/firestore';
import {addDoc,collection, serverTimestamp} from 'firebase/firestore';
import { useNavigate, useLocation } from 'react-router-dom';
import {CHAR_RACES} from '../constants';
import {useSelector, useDispatch} from 'react-redux';
import {setInit, selectPlayer} from '../store/playerSlice';

const SCREEN_DELAY = 4000; // delay in ms

const Selection = () => {
    const [initScreen, setInitScreen] = useState(true);
    const player = useSelector(selectPlayer);  
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [ready,setReady] = useState(false);
    const {state} = useLocation();

    useEffect(() => {
        let mounted = true;

        if(mounted){
            setTimeout(() => {
                setInitScreen(false);
            },SCREEN_DELAY);
        }

        return () => {
            mounted = false;
        }
    },[]);

    const handleFactionSelect = async (_faction) => {
        // add new player to db
        const ref = collection(db, 'players');
        const playerData = {
            address: state.address,
            cp: 0,
            created: serverTimestamp(),
            faction: _faction,
            faction_selected: true,
            games_lost: 0,
            games_won: 0,
            online: true,
            selected_char: 0,
            selected: {
                combatType: 'MELEE',
                lvl: 200,
                mgc: 10,
                str: 59,
                rng: 30,
                def: 101
            },
            time_played: 0,
            tokens: 10000,
            total_cp: 0,
            total_earned: 0,
            user_name: "someUser393900"
        }

        dispatch(setInit({
            ...playerData,
            created: new Date().getTime(),
            faction: _faction
        }))

        console.log({player});
        // set in redux as well****
        // addDoc(ref,playerData).then(res => {
        //     if(res.id){
        //         const _faction = CHAR_RACES[playerData.faction];
        //         dispatch(setInit({
        //             ...playerData,
        //             created: new Date().getTime(),
        //             faction: _faction
        //         }))
        //         // navigate('/play',{
        //         //     state: {
        //         //         player: {
        //         //             ...playerData,
        //         //             faction: _faction
        //         //         }
        //         //     }
        //         // });
        //         navigate('/play');
        //     }
        // }).catch(error => {
        //     console.error(error);
        // })
    }

    return (
        <div className='select-main'>
            {!initScreen ? <div id="main-select" className='fade-in-slow2 select-wrapper'>
                <h1 className='text-center'>CHOOSE YOUR SIDE</h1>
                <div className='select-cards'>
                    <Card cardStyle="f1" ability={SorcererShield} desc="Sorcerers Shield" title={WizardTitle} name={1} onClick={handleFactionSelect} />
                    <Card cardStyle="f3" ability={Berserk} desc="Berserk" title={KnightTitle} name={2} onClick={handleFactionSelect} />
                    <Card cardStyle="f2" ability={Barrage} desc="Barrage" title={ElfTitle} name={0} onClick={handleFactionSelect} />
                    <Card cardStyle="f4" ability={Weaken} desc="Weaken" title={GoblinTitle} name={3} onClick={handleFactionSelect} />
                </div>
            </div> :
            <div className='fade-in-slow sub-select-wrapper flex-just-center'>
                <div className='cracked'></div>
            </div>            
            }
        </div>
    )
}

export default Selection;

如您所見，我正在嘗試從我的 redux 存儲中調用setInit減速器，然后在此之后記錄新的 state。 我也知道嘗試在之后直接記錄 state 並不總是反映最新的數據，但我嘗試通過將 state 更改添加到我的組件並記錄播放器 Z9ED39E2EA931586B6A985A6942EF57 之后再次獲取相同的數據並返回。 沒有什么變化。

Answer 1

您嘗試通過執行export const selectPlayer = (state) => state.player; ，但您的 state 不包含播放器。

還要使用帶有useSelector() export const selectPlayer = createSelector((state) => state, (state) => state.player);選擇器，您必須使用createSelector()方法創建選擇器，如下所示：

我認為你的initialState就是你的player ，所以如果你想訪問它，你只需要返回你的state 。

這可能會對您有所幫助： https://redux-toolkit.js.org/api/createSelector