Unable to access library store inside another react application

[anj-kr]

Hello,

We are using a library where it handles authentication and the value of JWT is available in react library store. Now when we use the react library in another react application, we are not able to see the library store values(Only default value) is available in the react application.

I tried exporting the store directly with respect to react library but nothing seems to work.

My question is - Is it possible to use another react library store with updated value in any other react application?
Tried this as well - https://daveceddia.com/access-redux-store-outside-react/ but only default values are popping up with respect to react custom library and store. Any ideas or help on this please ? Thank you!

What is the expected behavior?

Able to use the same store from react library and use it with another react application for fetching the user data.

[markerikson]

I'm afraid the question here is very unclear. "Can't see store values" and "nothing seems to work" aren't things we can help answer. Can you show an example project demonstrating the issue, preferably as a CodeSandbox.

[anj-kr]

Yes. The library store has the reducer, middleware and actions. For example :below the reducer
``
import {
USER_SIGNED_OUT,
STORE_USER_ERROR,
USER_EXPIRED,
STORE_USER,
LOADING_USER
} from '../actions'

const initialState = {
user: null,
isLoadingUser: false
};

export default function (state = initialState, action) {
switch (action.type) {
case STORE_USER:
return {
...state,
isLoadingUser: false,
user: action.payload
}
case LOADING_USER:
return {
...state,
isLoadingUser: true
}
case USER_EXPIRED:
case STORE_USER_ERROR:
case USER_SIGNED_OUT:
return {
...state,
user: null,
isLoadingUser: false
}
default:
return state
}
}
``

I tried adding the library reducer as well in the react application store with other reducers, but that reducer is having the default state whenever accessing from the application components but not the updated one with the authenticated token. Am i missing anything like exporting the reducer or anything i'm not aware of ? please let me know.

[markerikson]

Honestly, this is what the Redux DevTools are for. What actions are being dispatched? Is the state being updated? If the reducer was actually added to the store, and the correct actions are being dispatched, it should be getting updated. Where and how are you seeing "the default state" still?

[anj-kr]

Actions here are dispatched based on the authentication redirect mechanism for OIDC which exists inside the library . Just to test further, when I added the state console in the library component updated state is available. But when I added the library reducer to the react application, I'm seeing only the default state in react application. Not sure I'm missing something here. Do I need to dispatch action from react application , that action is only for the library if the authentication redirect(Authorization Code Grant) call is successful?

[markerikson]

@anj-kr I'm afraid we're going in circles here, and you're really not answering my questions or providing any info I could actually use to help debug what's going on :(

There's nothing "magic" about this. It's all core Redux fundamentals:

• If the reducer is added to the store, it should be running in response to dispatched actions
• If the reducer sees a specific action that it cares about, it should be calculating a new state and returning a value
• You should be able to see all dispatched actions in the Redux DevTools, and see exactly what state was updated for each action dispatched

So far you haven't shown me how the store is being configured, you haven't shown me any of the actions, you haven't shown me where and how you're trying to read the state, and you haven't shown me any examples of what the action log in the Redux DevTools look like. I simply have no way of knowing what your app is actually doing without seeing more code and seeing more information.

So. Please take the time to investigate this further as I've asked. Look at the Redux DevTools. See what actions are being dispatched. Throw console logging in the reducer and confirm it's running. This is, tbh, basic debugging principles here.

[anj-kr]

Sure. Thank you! I will take a look and update here again.