嘿,SO社区我正在Solana上开发一个dApp,我正在使用Redux进行状态管理。我正在创建一个Redux切片,它保存当前";尖端接收器";钱包地址。我正在使用Redux工具包的createSlice
,但我在控制台中不断收到这个初始化错误:
redux.js:473 Uncaught Error: The slice reducer for key "receiver" returned undefined during initialization.
If the state passed to the reducer is undefined, you must explicitly return the initial state.
The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.
at redux.js:473:1
at Array.forEach (<anonymous>)
at assertReducerShape (redux.js:466:1)
at combineReducers (redux.js:531:1)
at configureStore (configureStore.ts:147:1)
at ./src/app/store.js (store.js:7:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.js (counterSlice.js:73:1)
这是我在receiverAddressSlice.js
:的切片
import { createSlice } from '@reduxjs/toolkit';
const initalState = {
value: '',
}
const receiverAddressSlice = createSlice({
name: 'receiver',
initalState,
reducers: {
selectReceiver(state, action) {
const address = action.payload;
state.value = address;
}
}
});
export const { selectReceiver } = receiverAddressSlice.actions;
export const selectWalletAddress = (state) => state.receiver.value;
export default receiverAddressSlice.reducer;
我在这里看到了很多答案,说你需要添加一个默认情况,但我没有使用传统的switch语句。使用createSlice
时如何使用explicitly return the initial state
?我在Redux官方文档中找不到任何关于这方面的信息。
供参考
store.js
:
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import postingReducer from './Slices/postingSlice';
import tippingReducer from './Slices/tippingSlice';
import receiverReducer from './Slices/receiverAddressSlice';
export const store = configureStore({
reducer: {
counter: counterReducer,
posting: postingReducer,
tipping: tippingReducer,
receiver: receiverReducer
},
});
content.js
中我尝试在切片中调度动作的部分:
{posts.filter(post => post.account.title != "BAYC #197" && post.account.cta != "https://twitter.com/dxlantxch").map((post, index) => (
<div className=" w-1/2 p-1 shadow-xl bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 rounded-3xl m-6">
<a className="block p-6 bg-white sm:p-8 rounded-3xl text-black flex" href="">
<div className="sm:pr-1">
<h1 className="text-2xl mb-3 font-bold">{post.account.title}</h1>
{/* <h1 className="text-9xl">🖼️</h1> */}
<a href={post.account.artwork} target="_blank" rel='noreferrer'>
<img className="shadow-2xl rounded-sm h-auto max-w-full " src={post.account.artwork}>
</img>
</a>
</div>
<div className="text-center m-2">
<h3 className="font-bold">Created by {shortenAddress(post.account.creator.toString())}</h3>
<p className='my-2'>{post.account.description}</p>
<button className="w-1/3 border-black border-2 bg-black text-white rounded-lg p-2 my-4"
onClick={(event) => {
event.preventDefault();
dispatch(toggle());
console.log(tipping);
//attempting to dispatch
dispatch(selectReceiver(post.account.creator.toString()));
}}
>
TIP
</button>
<div className="w-full flex justify-evenly pt-3 pl-2 my-4">
<div className="flex">
<div>
<BiUpvote className="text-xl"/>
<BiDownvote className="text-xl"/>
</div>
<p className="text-gray-600 pt-1 pl-1">{post.account.points.toString()}</p>
</div>
<div className="flex">
<FiStar className='text-4xl'/>
<p className="text-gray-600 pt-1 pl-1">{post.account.stars.toString()}</p>
</div>
{post.account.cta ?
<button className='border-black border-2 rounded-lg bg-black text-white w-1/4 p-1 hover:shadow-2xl hover:bg-gray-700 hover:border-gray-700'>
<a href={post.account.cta} target='_blank' rel="noreferrer">
<span className="underline underline-offset-2">More?</span>
</a>
</button> :
<>
</>
}
</div>
</div>
</a>
</div>
))}
将拼写从initalState
更正为initialState
,这可能是问题所在。只是遇到了同样的问题,在我意识到这一点之前,我不得不四处奔波