using multiple instances of the same redux components react

You can dynamic reducer for each widget is by assigning unique id for each new widget created and creating a new parent reducers as wrapper, something like:

import { combineReducers } from 'redux';

const widgetReducer= (state = {}, action) => {
    switch (action.type) {
        case 'SET_API':
            return { ...state, API: action.payload.API };
    }

    return state;
}

export widgetsContainerReducer(state = {}, action) {
   
   switch(action.type) {
    case 'SET_API':
    case 'WIDGET_ACTION_1':
    case 'WIDGET_ACTION_2': // other widget specific actions  
      const widgetId = action.payload.id;
   
      return {
        ...state,
        [widgetId]: widgetReducer(state[widgetId], action)
      }}
    default:
      return state;
   }
}

export default combineReducers({
    widgets: widgetsContainerReducer
});

Then have a widget id for every action specific to each widget:

export const SetAPI = (widgetId, data) => {
    return {
        type: "SET_API",
        payload: {
            API: data,
            id: widgetId
        }
    }
}

Your resulting reducer will look something like this:

{
   widgets: {
      widget-1: {
        API: 'api-1'
      },
      widget-2: {
        API: 'api-2'
      },
      ...
   }

}