Redux actions to reducers not showing in devtools state

Question

I'd managed to get some of my earlier functions state in devtools as below:

Reducers function in DevTools

But when I tried to query some of the events in my interactions, the functions state werent able to display it. Below are my codes and settings, basically the flow is interactions > actions > reducers

interaction code:

export const loadAllOrders = async (exchange, dispatch) => {
    // Fetch cancelled orders with the "Cancel" event stream    
    const fromBlock = 0;
    const toBlock = "latest";
    const cancelFilter = exchange.filters.CancelOrder();
    const cancelStream = await exchange.queryFilter(cancelFilter, fromBlock, toBlock);
    console.log(cancelStream)
    // Format cancelled orders
    const cancelledOrders = cancelStream.map((event) => event.args);
    // Add cancelled orders to the redux store
    dispatch(cancelledOrdersLoaded(cancelledOrders));
}

from my actions:

export const cancelledOrdersLoaded = (cancelledOrders) => {
    return {
        type: 'CANCELLED_ORDERS_LOADED',
        payload:cancelledOrders
    }
}

from my reducers:

export const exchange = (state = initialState, action) => {
    switch (action.type) {
        case 'EXCHANGE_LOADED':
            return { ...state, loaded:true, contract: action.payload }
        case 'CANCELLED_ORDERS_LOADED':
            return { ...state, cancelledOrders: action.payload }
        default:
          return state

}

my configureStore

// For redux dev tools
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk),devTools)
)

Thanks in advance

Answer 1

I haven't worked with redux for quite some time now, but from a quick look at some of my older repos, it seems like you didn't set up your store correctly.

This is what I have there,

import { applyMiddleware, createStore, compose, combineReducers } from "redux"
import thunk from "redux-thunk"

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const rootReducer = combineReducers({
  reducers...
})

export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))