![](/img/trans.png)
[英]React-Redux. After changing state by useDispatch, components not updating by useSelector
[英]React Redux state not changing after calling useDispatch()
我正在尝试在我的基于网络的游戏中使用更新版本的 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 之后再次获取相同的数据并返回。 没有什么变化。
您尝试通过执行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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.