0

我在 Redux 商店中遇到react_on_rails了我想要切换页面的问题，它对我来说无法正常工作。如果我更改页面或重新加载它，我将丢失 redux 商店。另外，我很抱歉我放了一堆代码，但我真的不知道其他任何东西或修复它的方法，react_on_railsredux 的官方文档并没有帮助我，它更有可能让我困惑它应该如何工作。如果有人知道如何使它工作，请提前，谢谢

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);
};

减速器/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>
4

1 回答 1

1

由于 Redux 存储在您加载页面时被初始化，导航到新页面或重新加载页面将导致您的所有 JS 资产重新加载并重新初始化，从而导致您的存储重置。

如果您想在不重新加载页面的情况下更改浏览器的位置，则需要使用react-router 之类的东西来处理 React 组件之间的导航，而不是通过 Rails 服务器完成完整的请求/响应周期。

于 2019-03-20T04:06:14.860 回答