React + Redux + Rails теряет магазин после переключения страницы - PullRequest
Новая
       33

React + Redux + Rails теряет магазин после переключения страницы

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

У меня возникла проблема с магазином Redux при получении react_on_rails, где я хочу переключить страницу, и она не работает правильно для меня.Я теряю избыточное хранилище, если меняю страницу или перезагружаю ее.Кроме того, я прошу прощения за кучу кода, который я поместил, но я действительно не знаю ничего другого или способов исправить это, официальные документы для react_on_rails и redux не помогли мне, и это скорее смущает меня, как это должноРабота.если кто-нибудь знает, как заставить его работать, заранее спасибо

rootStore.js 

import { combineReducers, applyMiddleware, createStore } from 'redux';
import middleware from 'redux-thunk';

import reducers from '../reducers';

export default (props, railsContext) => {
  // eslint-disable-next-line no-param-reassign
  delete props.prerender;
  const combinedReducer = combineReducers(reducers);
  const newProps = { ...props, railsContext };
  return applyMiddleware(middleware)(createStore)(combinedReducer, newProps);
};

redurs / index.js 

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import cartReducer from './cartReducer';

const rootReducer = combineReducers({
  routing: routerReducer,
  cart: cartReducer,
});

export default rootReducer;

компонентчто я пытаюсь творить чудеса с 

// @flow

import * as React from 'react';
import { connect } from 'react-redux';
import { addToCart} from '../actions/setCart';
import styles from './AddToCart.module.scss';

type Props = {
  productId: number,
}

type State = {}

class AddToCart extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  onClick = () => {
    console.log(this.props.productId);
    this.props.addToCart(this.props.productId);
  };

  render() {
    console.log('this.props.cart', this.props.cart);

    return <button
      onClick={this.onClick}
      className={styles.button}
    >Add To Cart</button>;
  }
}

const AddToCartRedux = connect(
  state => ({
    cart: state.cart,
  }),
  dispatch => ({
    addToCart: id => {
      dispatch(addToCart(id));
    },
  }),
)(AddToCart);

export default AddToCartRedux;

моей точкой входа 

import ReactOnRails from 'react-on-rails';
import ProductDetailPage from '../pages/ProductDetailPage';
import rootStore from '../store/rootStore';
ReactOnRails.setOptions({
  traceTurbolinks: true,
});
ReactOnRails.register({ProductDetailPage});
ReactOnRails.registerStore({rootStore});

моим приложением макета 

<!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>

1 Ответ

1 голос
/ 20 марта 2019

Поскольку хранилище Redux инициализируется при загрузке страницы, переход на новую страницу или перезагрузка страницы приведут к перезагрузке и повторной инициализации всех ресурсов JS, что приведет к сбросу вашего хранилища.

Если вы хотите изменить местоположение браузера без перезагрузки страницы, вам нужно будет использовать что-то вроде response-router для обработки навигации между компонентами React вместо полного запроса / ответацикл с сервером Rails.

...