在不同的屏幕中设置 Redux 商店监听器

Question

我对 redux 很陌生，因此如果我的解释有点草率，请原谅：我有一个复杂的 react native 应用程序，它使用 redux 商店，还有 firebase 的东西和 react 导航。我在一个父 js 文件中声明了我的 redux 商店，该文件用导航器包装了所有其他屏幕，商店的声明如下所示：

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

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

我知道理论上我现在可以将类似的东西直接应用到我的商店下面：

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

每次商店改变他的状态时，它都会显示在我的控制台中。 我面临的问题是我想订阅商店，而不是在同一个 js 文件中。

我想要完成的是在整个应用程序中，在导航器子组件中的某个地方监听 store 的变化，并自动检测 store 何时发生变化。

详细来说，我在我的一个屏幕中使用了 firebase 监听器。一旦我想在我的应用程序中更改用户（那是我重置整个 redux 商店的地方，这就是我想要一个 redux 商店监听器的原因），firebase 监听器就不会停止，因为我需要在我初始化它们的同一个 js 文件中停止它们，因此我需要在完全相同的文件中实现 redux 存储监听器，这与我创建 redux 存储的文件不同。我需要在我的聊天屏幕中监听 redux 的变化，并且一旦我更改用户，我需要注册 redux 存储为空并调用我的 firebase 侦听器停止。

你认为这是可能的吗？如果是，我该怎么做？

Answer 1

如果问题是由这个引起的，可以进行处理。

在商店中创建的页面上：

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

在商店中使用的页面上：

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);
});

因此您可以在任何页面上订阅您的商店。但是，在使用订阅者事件时尽量避免内存泄漏。完成后，取消订阅。