为什么此Redux片返回初始化错误?

toiithl6  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(187)

我正在Solana上开发一个dApp,我正在使用Redux进行状态管理。我正在创建一个Redux切片来保存当前“tip receiver”钱包地址的状态。我正在使用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;

我在这里看到了很多答案,说你需要添加一个默认的case,但我没有使用传统的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>
            ))}
agyaoht7

agyaoht71#

把拼写从initalState纠正为initialState,这可能就是问题所在。只是遇到了同样的问题,不得不在我意识到之前乱转了一点。

相关问题