The state is set, but I'm not entirely sure why my extraReducers state is not persisting to storage on page refresh. I tested a state setter for just reducers and it persisted perfectly fine on page refresh.

Store.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

I use useAppSelector to confirm that state gets set, but looking at local storage, nothing changes, and on page refresh it doesn't persist. Highly confused and would like for another eye on what might be the problem here. Thank you!

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