我想在反应原生应用程序中使用 2 个不同的商店。1 是简单的 redux 存储,而 1 是 rematch ,就像它的包装器一样。我正在尝试这样的事情,
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;
在组件中,我这样连接
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;
基本上,当组件页面加载并单击按钮时,标志在商店中成功更改,组件重新渲染并显示新值。
但是,然后当我导航(navigator.push)到其他页面时->然后返回(navigator.pop)->单击按钮->当我从模型中的控制台检查时,商店中的值更新->但是组件不会重新渲染
不知何故,通常它可以工作,但是每当我导航时,如果连接的商店值发生变化,那么它不会更新组件的道具。
这只发生在复赛模型中..
它使用遗留的 React 原生 Navigator 组件进行导航。这可能不是合并两家商店的最佳方式,但请告知是否有更好的方式,因为我们都需要。
谢谢你。