在不同的屏幕中设置 Redux 存储监听器

Question

Im pretty new to redux therefore please excuse me if my explanation is a little bit sloppy: I have a complex react native app using the redux store but also firebase stuff and react navigation. Im declaring my redux store in a parents js file which wraps all other screens with a navigator, declaration of store looks like this:

const rootReducer = combineReducers({
  auth: authReducer,
  myPigeons: pigeonReducer,
  myBadges: badgesReducer
});

const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

I know that I could in theory now apply something like that to my store directly underneath:

store.subsribe(state => console.log(state));

and every time the store would change his state, it would be shown in my console. The problem I face through is that I want to subscibe to the store, just not in the same js file.

What I want to accomplish is to listen to store changes in the entire app, somewhere in a navigator child component and automaticly detect when the store changes.

Going in detail, I am using firebase listeners within one of my screens. As soon as I want to change the user in my app (thats where I reset my whole redux store, thats why I want a redux store listener) the firebase listeners dont stop because I need to stop them in the same js file I initialized them, and therefore I will need to implement the redux store listener inside the exact same file, which is NOT the same file in which I created my redux store. I need to listen to redux changes inside my chatscreen and as soon as I change user I need to register that redux store is empty and call my firebase listeners to stop.

Do you think this is possible and if yes, how I could do that?

Answer 1

If the problem is caused by this, an approach can be made.

On the page created in the Store:

export const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

On the page to be used in the Store:

import {store} from '....'

store.subscribe (() => {
    // You can choose your reducers
    let {auth, myPigeons} = store.getState();
    console.log(auth);

    // Brings up the whole store
    let state = store.getState();
    console.log(state);
});

So you can subscribe to your store on any page. However, try to avoid the memory leak when using subscriber events. When you're done, cancel your subscription.