React + Rails с Redux Persist Gate - PullRequest
Новая
       23

React + Rails с Redux Persist Gate

0 голосов
/ 21 марта 2019

Я новичок во всем, в том числе и в отношении response_on_rails, и пытаюсь выяснить, как использовать redux-persist в моем проекте, чтобы при смене страницы я не терял ни одного избыточного хранилища. Я выяснил настройку приставки, но я не могу заставить 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 Ответ

0 голосов
/ 22 марта 2019

После пары часов отладки я на самом деле понимаю, почему мой persistStore не работал.Вот что я сделал в своем коде.

store / rootStore 

_persistor = persistReducer(_store); => _persistor = persistStore(_store);

Основной входной файл 

ReactOnRails.register({ProductDetailPage});
registerRootStore();

Должно быть 

registerRootStore();
getReactOnRails().register({ProductDetailPage});

и, наконец, компонент, который отвечает на PersistGate и провайдера редукса, он должен отображаться в компоненте, а не вне класса, и он должен быть таким: 

const rootStore = getReactOnRails.getStore('rootStore');
...