调用useDispatch()后不改变Redux状态[已解决]

Question

解决了

我试图在基于web的游戏中使用新版本的react v8.0.2来保持应用程序中的状态，而不必在导航调用之间传递状态。

不幸的是，我遇到了第一次初始化player状态的问题，但是在调用useDispatch()方法之后没有更新最后的状态。我试着在网上到处寻找，但目前的解决方案中没有一个真正解决了我的问题。

我甚至强迫我的功能组件重登，这仍然只是返回我的播放器的初始状态，而不是我所期望的更新状态。有人能帮我找出我在这里错过了什么吗。它必须是一些在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,
    },
})

Selection.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还原程序，然后再记录新的状态。我还知道，尝试直接记录状态并不总是反映最近的数据，但我尝试了将状态更改添加到组件中，然后再记录player状态，然后再得到相同的数据。什么都没变。

Answer 1

    setInit: (state,action) => {
        state = action.payload;
    },

这没有任何作用，它只是替换了局部变量state，但是Redux不可能看到这一点。您应该改变状态，或者返回一个新的状态。在您的例子中，返回action.payload应该可以工作。

请参阅https://redux-toolkit.js.org/usage/immer-reducers#resetting-and-replacing-state