Redux Persist的React + Rails
Redux Persist的React + Rails
提问于 2019-03-21 11:08:50
我对任何东西都是新手，特别是对react_on_rails，我正在尝试弄清楚如何使用redux-persist与我的项目，以便当我改变页面时，我不会失去任何redux商店。我已经弄清楚redux的设置，但我不能让Redux Persist正常工作，它仍然无法Uncaught Error: Could not find store registered with name 'rootStore'. Registered store names include [ ]. Maybe you forgot to register the store?，我只是想知道是否有人可以帮助它解决问题。我尝试了几次文档，确实对我的选择有很大帮助。
我的应用程序视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= notice %>
<%= alert %>
<%= redux_store('rootStore', props: {}) %>
<%= react_component('ProductDetailPage', props: {product: @product.id}) %>
<%= yield %>
<%= redux_store_hydration_data %>
</body>
</html>注册ProductDetailPage的入口点
import ReactOnRails from 'react-on-rails';
import ProductDetailPage from '../pages/ProductDetailPage';
import { registerRootStore } from '../utils/ReactOnRails';
ReactOnRails.setOptions({
traceTurbolinks: true,
});
ReactOnRails.register({ProductDetailPage});
registerRootStore();utils/ReactOnRails
import { configureStore } from '../store/rootStore';
export default function getReactOnRails() {
window.ReactOnRails = window.ReactOnRails || require('react-on-rails').default;
return window.ReactOnRails;
}
export const registerRootStore = function () {
if (getReactOnRails().storeGenerators().has('rootStore')) {
return;
}
getReactOnRails().registerStore({rootStore: configureStore });
};store/rootStore
import { createStore } from 'redux';
import reducerIndex from '../reducers/index';
import { persistReducer} from 'redux-persist';
let _store;
let _persistor;
export const configureStore = function (props) {
if (_store) return _store;
const initialState = (props) ? {...props} : {};
_store = createStore(reducerIndex, initialState);
_persistor = persistReducer(_store);
return _store;
};
export const getPersistor = function () {
return _persistor;
};reducers/index
import { combineReducers } from 'redux';
import { persistReducer} from 'redux-persist';
import cartReducer from './cartReducer';
const rootReducer = combineReducers({
cart: cartReducer,
});
const reducer = persistReducer(
{
key: 'root',
storage: require('localforage'),
},
rootReducer
);
export default reducer;最后一个文件，用于处理稍后将注入的所有其他组件。
// @flow
import * as React from 'react';
import { Provider } from 'react-redux';
import getReactOnRails from '../utils/ReactOnRails';
import { PersistGate } from 'redux-persist/es/integration/react';
import { getPersistor } from '../store/rootStore';
type Props = {
children: React.Node,
loading?: React.Node,
}
const rootStore = getReactOnRails.getStore('rootStore'); // another error that happening for me, it says that getStore is not a function.
export default class ProviderGate extends React.Component<Props> {
render() {
const persistor = getPersistor();
if (!persistor) return this.props.children;
return <Provider store={rootStore}>
<PersistGate persistor={persistor} loading={this.props.loading}>
{this.props.children}
</PersistGate>
</Provider>;
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-22 10:59:12
经过几个小时的调试，我终于找到了我的persistStore不工作的原因。下面是我在代码中所做的事情。
store/rootStore
_persistor = persistReducer(_store); => _persistor = persistStore(_store);主入口文件
ReactOnRails.register({ProductDetailPage});
registerRootStore();应该是
registerRootStore();
getReactOnRails().register({ProductDetailPage});最后，响应PersistGate和redux提供程序的组件应该在组件中呈现，而不是在类之外呈现，它应该是这样的
const rootStore = getReactOnRails.getStore('rootStore');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55273199
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号