Redux切片初始化报错排查：Solana dApp中createSlice使用问题

我正在Solana上开发一款dApp，采用Redux进行状态管理。我创建了一个Redux切片用于存储当前“小费接收者”的钱包地址，使用Redux Toolkit的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 ()
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;

我看到很多解决方案提到需要添加默认case，但我并未使用传统switch语句。请问使用createSlice时如何显式返回初始状态？我在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中dispatch切片action的代码片段 #

{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>
            ))}

你犯了一个拼写错误：把initialState写成了initalState（少了一个字母i）。

Redux Toolkit的createSlice需要接收名为initialState的参数来指定初始状态，因为你写错了参数名，切片无法识别初始状态，导致初始化时reducer返回undefined，触发了这个错误。

修正后的receiverAddressSlice.js代码：

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

// 修正拼写：initalState → initialState
const initialState = {
    value: '',
}

const receiverAddressSlice = createSlice({
    name: 'receiver',
    // 这里同样修正拼写
    initialState,
    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;

这个错误很容易忽略，因为变量名拼写错误不会触发语法报错，但会导致Redux无法正确读取初始状态。修正拼写后，切片就能正常初始化，错误会消失。

内容的提问来源于stack exchange，提问作者Dylan Molina