El estado está configurado, pero no estoy completamente seguro de por qué mi estado de extraReducers no persiste en el almacenamiento en la actualización de la página. Probé un setter de estado solo para reducers y persistió perfectamente bien en la actualización de la página.

Tienda.ts

 import storage from "redux-persist/lib/storage"; import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER, } from 'redux-persist' import { createWhitelistFilter } from 'redux-persist-transform-filter'; import { configureStore, combineReducers } from '@reduxjs/toolkit' import { blockchainSlice } from 'slices' const persistConfig = { key: "root", version: 1, storage, whitelist: ['blockchain'] } const persistedReducer = persistReducer(persistConfig, combineReducers({ blockchain: blockchainSlice.reducer })) export const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }); export const persistor = persistStore(store) export type AppDispatch = typeof store.dispatch; export type RootState = ReturnType<typeof store.getState>;

blockchainSlice.ts

 import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'; import { Contract } from "web3-eth-contract"; import Web3 from "web3"; import { RootState } from 'root'; declare let window: any; export interface BlockchainState { contract: Contract | null, ethWeb3: { connected: boolean, instance: Web3 | null, walletAddress: string | null } } const initialState: BlockchainState = { contract: null, ethWeb3: { connected: false, instance: null, walletAddress: null } } export const initWeb3Instance = createAsyncThunk( 'blockchain/initWeb3', async (thunkApi) => { if (window.ethereum) { await window.ethereum.send('eth_requestAccounts') let web3 = new Web3(window.ethereum) let address = await web3.eth.getAccounts().then(addr => addr[0].toLowerCase()) return { instance: web3, walletAddress: address } } else { alert('Please install Metamask!') } } ) export const blockchainSlice = createSlice({ name: 'blockchain', initialState, reducers: {}, extraReducers: (builder) => { builder.addCase(initWeb3Instance.fulfilled, (state, { payload }: any) => { state.ethWeb3.connected = true state.ethWeb3.instance = payload.instance state.ethWeb3.walletAddress = payload.walletAddress }) }, }) export default blockchainSlice

Uso useAppSelector para confirmar que el estado se establece, pero al observar el almacenamiento local, nada cambia y en la actualización de la página no persiste. Muy confundido y me gustaría otro ojo sobre cuál podría ser el problema aquí. ¡Gracias!

const { connected, instance, walletAddress } = useAppSelector((state) => state.blockchain.ethWeb3)