React native legacy navigator with rematch store issue on navigation

Question

I want to use 2 different stores in a react native app. 1 is the simple redux store, and 1 of rematch which is just like a wrapper over it. I am trying something like this,

store.js

import {
  applyMiddleware,
  createStore as _createStore
} from 'redux';
import reduxMiddleware from './Middleware/reduxMiddleware';
import { reducers } from "./reducers";

const store1 = _createStore(
  reducers,
  applyMiddleware(
    reduxMiddleware
  )
);

// Rematch
import { init } from '@rematch/core';
import * as models from './Models';

const store2 = init({
  models,
  redux: {},
  plugins: []
});

const persistor = getPersistor();

const finalStore = {
  persistor,
  store: {
    getState: () => ({
      ...store1.getState(),
      ...store2.getState(),
    }),
    dispatch: store1.dispatch,
    dispatchModel: store2.dispatch,
    subscribe: val => {
      store1.subscribe(val);
      store2.subscribe(val);
    }
  },
};

export default finalStore;

In the component, i connect like this

import customConnect from '../../../Redux/customConnect';

const mstp = state => ({
    flag: state.someModel.flag
});

const mdtp = (any, dispatch) => ({
    setFlag: dispatch.someModel.setFlag
});

const SomeComponent = props => {
    console.log('PROPS:', props.flag);
    return (
       ...
       <Button onPress={() => setFlag('newValue')}> ... </Button>
       ...
    )
}

export default customConnect(mstp, mdtp)(SomeComponent);

customConnect.js

import { connect } from 'react-redux';
import configureStore from './store';

const { store } = configureStore;

const customConnect = (mstp, mdtp) => {
  finalMdtp = () => mdtp(store.dispatch, store.dispatchModel);

  return connect(mstp, finalMdtp);
};

export default customConnect;

Basically when the component page loads and i click the button, the flag changes successfully in store, component re-renders and displays new value.

But, Then When i navigate (navigator.push) to some other page -> then come back (navigator.pop) -> click on the button -> value updates in the store as i check from consoling in the model -> but the component does not re-render

Somehow, normally it works but whenever i navigate, then if connected store values change, then it does not update the props of the component.

This only happening in the rematch models..

It uses the legacy React native Navigator component for navigation. This may not be the best way to merge both stores but please tell if there is a better way, as we need both.

Thank you.

Answer 1

Why would you use that work-around to merge both stores, when Rematch accepts a configuration property called redux where you can pass anything related to redux? (Even middlewares, or reducers)

https://rematchjs.org/docs/api-reference/