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.
