state reducers not showing correct state as seen in logger

[bipin1611]

Hello there,

I am facing weird issue on redux devtool,

I created 3 reducers

But when i check on redux devtool it's not showing last 2 reducers

Can someone please help here?

[markerikson]

@bipin1611 : can you put together a project that actually reproduces this issue?

From the screenshot, it looks like you might be putting some non-serializable values into the Redux store, like class instances. That's bad, because those won't show up in the DevTools - this is the main reason why we tell people not to do that :)

[bipin1611]

Hello Mark,

I appreciate your response, But i am in learning stage, can you please help me here.

Here is my reducers

import { combineReducers } from 'redux'


function web3(state = {}, action) {
  switch (action.type) {
      case 'WEB3_LOADED':
        return { ...state, connection: action.connection}
      case 'WEB3_ACCOUNT_LOADED':
          return { ...state, account: action.account}

      default:
        return {...state}
  }
}

function token(state = {}, action) {
  switch (action.type) {

      case 'TOKEN_LOADED':
        return { ...state, loaded: true, tokenContract: action.tokenContract}

      default:
        return {...state}
  }
}

function exchange(state = {}, action) {
  switch (action.type) {

      case 'EXCHANGE_LOADED':
        return { ...state, loaded: true, exchangeContract: action.exchangeContract}

      default:
        return {...state}
  }
}

const rootReducers =  combineReducers({
    web3: web3,
    token: token,
    exchange: exchange
})

export default rootReducers

and i triggered action like this,

export function tokenLoaded(tokenContract){
    return{
        type: 'TOKEN_LOADED',
        tokenContract
    }
}

export function exchangeLoaded(exchangeContract){
    return{
        type: 'EXCHANGE_LOADED',
        exchangeContract
    }
}

and here is how i dispatch action,

export const loadToken = (web3, networkId, dispatch) =>{

    try {

        const abi =  Token.abi
        const address =  Token.networks[networkId].address

        const token = new web3.eth.Contract(abi, address)

         dispatch(tokenLoaded(token))

        return token

    }catch (e){
        console.log('token contract is not deployed to current network')
        return null
    }

}

and last this is cofiguration of store

import { createStore , applyMiddleware, compose } from 'redux'
import { createLogger } from "redux-logger/src";
import rootReducer from "./reducers";

const loggerMiddleware = createLogger()
const middleware = []

// for redux dev tool
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export default function configureStore(preloadedState){
    const store = createStore(
        rootReducer,
        preloadedState,
        composeEnhancers(applyMiddleware(...middleware, loggerMiddleware))
    )

    return store;
}

Thank you!!

[markerikson]

Based on that original screenshot, I'm guessing that exchangeContract: Contract and connection: Web3 are actually class instances. Those should not go into the Redux store - only plain JS objects and arrays.

Also, as a side note: you're writing a very old style of Redux code. "Modern Redux" with Redux Toolkit is much easier to learn and use.

Please see our Redux docs tutorials for more details:

https://redux.js.org/tutorials/index