我想在React Native应用程序中使用2个不同的商店。 1是简单的redux存储,而rematch的1就像是包装上的包装。我正在尝试这样的事情,
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组件进行导航。 这可能不是合并两个商店的最佳方法,但是请告诉我们是否有更好的方法,因为我们都需要。
谢谢。
答案 0 :(得分:0)
当 Rematch 接受名为 redux
的配置属性时,您为什么要使用该变通方法来合并两个存储区,您可以在其中传递与 redux 相关的任何内容? (甚至是中间件,或减速器)