文章/答案/技术大牛

发布

社区首页 >问答首页 >React + Redux + Rails在切换页面后丢失存储

问React + Redux + Rails在切换页面后丢失存储
EN

Stack Overflow用户

提问于 2019-03-20 11:41:59

回答 1查看 353关注 0票数 0

我在获取react_on_rails的Redux store中遇到了一个问题，在那里我想切换页面，但它不能正确地为我工作。如果我更改或重新加载页面，我将丢失redux存储。另外，我很抱歉我放了一堆代码，但我真的不知道其他任何东西或方法来修复它，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);
};

reducers/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>

ruby-on-rails

reactjs

redux

react-on-rails

回答 1

Stack Overflow用户

发布于 2019-03-20 12:06:15

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55253235

复制

相似问题

问React + Redux + Rails在切换页面后丢失存储
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React + Redux + Rails在切换页面后丢失存储EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React + Redux + Rails在切换页面后丢失存储
EN