javascript - 在 React 组件之外访问 Redux Store 返回初始值
问题描述
在基于Keftaa/expo-redux-boilerplate
样板的 React Redux 应用程序中redux-persist
,我们如何从非 React 组件访问持久化的 Redux 存储?
问题:我不确定我们如何访问/导出store
返回的,configureStore()
因为configureStore()
传递了一个setState()
函数,更重要的是它存储在Setup
组件的状态中而不是导出:
export default class Setup extends Component {
this.state = {
isLoading: false,
store: configureStore(() => this.setState({ isLoading: false })),
isReady: false
};
...
render() {
if (!this.state.isReady || this.state.isLoading) {
return <Expo.AppLoading />;
}
return (
<Provider store={this.state.store}>
<App />
</Provider>
);
}
}
import { AsyncStorage } from "react-native";
import devTools from "remote-redux-devtools";
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";
import devToolsEnhancer from 'remote-redux-devtools';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web and AsyncStorage for react-native
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, reducer);
export default function configureStore(onCompletion: () => void): any {
const enhancer = compose(
applyMiddleware(thunk),
devTools({
name: "MyApp",
realtime: true
})
);
let store = createStore(persistedReducer, enhancer);
let persistor = persistStore(store, null, onCompletion);
return store;
}
尝试失败
返回一个只有它的商店initialValues
。我相信这是因为我们正在创建一个新的 redux 商店,而不是从setup.js
.
我的/src/lib/utils.js
import configureStore from "../boot/configureStore";
const state = configureStore
console.log(state); // returns only the initial value for the store
使用
react@16.8.3
redux@4.0.4
react-redux@7.1.0
redux-persist@5.10.0
解决方案
您可以从组件中导出存储访问器函数Setup
,例如:
let store = null;
export function getStore() {
return store;
}
export default class Setup extends Component {
constructor(props) {
super(props);
store = configureStore(() => this.setState({ isLoading: false })),
this.state = {
isLoading: false,
store,
isReady: false
};
}
然后getStore()
从其他地方调用并在调用之前检查以确保它不为空store.getState()
;
推荐阅读
- r - 如何将转换矩阵读入 Cytoscape 以进行马尔可夫链建模?
- reactjs - 我可以为 ReactJS 重新使用相同的 onload.js 函数吗
- android - 无法使用 com.android.test 模块插件运行 android espresso 测试
- scala - 无法在操作过滤器中读取请求正文
- c# - 如何修复 C# 代码中的额外空白问题?
- android - 如何在 Android 中设计和分发具有丰富 UI、交互和依赖项的库?
- c - 使用 c11 标准和 clang 来使用 strcpy_s
- python - 将带有 matplotlib 的 networkx 图保存为 .jpg 文件
- php - 尝试从命名空间加载接口“NotExistingInterface”
- r - 将时间输入打印为 r 中的单词