React + Rails 与 Redux Persist Gate
React + Rails with Redux Persist Gate
我对所有事物都是新手,特别是 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>;
}
}
经过几个小时的调试,我终于找到了我的 persistStore 无法正常工作的原因。这是我在代码中所做的事情。
store/rootStore
_persistor = persistReducer(_store); => _persistor = persistStore(_store);
主条目文件
ReactOnRails.register({ProductDetailPage});
registerRootStore();
应该是
registerRootStore();
getReactOnRails().register({ProductDetailPage});
最后是响应 PersistGate 和 redux Provider 的组件,它应该在组件中呈现,而不是在 class 之外,它应该是这样的
const rootStore = getReactOnRails.getStore('rootStore');
我对所有事物都是新手,特别是 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>;
}
}
经过几个小时的调试,我终于找到了我的 persistStore 无法正常工作的原因。这是我在代码中所做的事情。
store/rootStore
_persistor = persistReducer(_store); => _persistor = persistStore(_store);
主条目文件
ReactOnRails.register({ProductDetailPage});
registerRootStore();
应该是
registerRootStore();
getReactOnRails().register({ProductDetailPage});
最后是响应 PersistGate 和 redux Provider 的组件,它应该在组件中呈现,而不是在 class 之外,它应该是这样的
const rootStore = getReactOnRails.getStore('rootStore');