0

我正在尝试使用 Ruby on Rails 和 React 构建一个简单的应用程序。我正在使用 gem react_on_rails。另外，我正在尝试在需要时使用 Redux 在不同组件之间进行通信。我目前遇到的问题我不明白如何在应用程序中保存 Store。如果它是一个普通的 React 应用程序，我在组件之间共享 Redux 没有问题。在 React On Rails 中是一种不同的设置方式，它在当前实现中运行良好，但是当我切换到不同的页面或刷新页面时，我失去了存储。

我的目标是通过 Redux 将产品 ID 添加到购物车，当用户重定向到/cart页面时，它可以从 Redux 商店检索购物车数组，然后我可以用所需的产品填充页面。

Rails 中的简单视图组件示例。

<div class='fancyClass'>
  <%= react_component("ProductDetail", props: {product: @product.id}) %>
</div>

将产品添加到购物车数组的简单反应组件示例

// @flow

import * as React from 'react';
import { Provider, connect } from 'react-redux';
import { setCart } from 'action/SetCart';
import { createStore } from 'redux';
import rootReducer from '../reducers';

const store = createStore(rootReducer);

type Props = {
    product: number
}

export class Scratch1 extends React.Component<Props> {
    onClick = () => {
        this.props.setCart(this.props.product);
        window.location.assign('/cart')
    };

    render() {
        return (
            <Provider store={store}>
                <button onClick={this.onClick}>add to cart</button>
            </Provider>
        );
    }
}

const Scratch1Redux = connect(
    state => ({
        cart: state.cart,
    }),
    dispatch => ({
        setCart: id => {
            dispatch(setCart(id))
        }
    })
)(Scratch1);

export default Scratch1Redux;

先感谢您

4

1 回答 1

1

您不了解 React + Rails 的工作原理。Rails 服务于资产：HTML、JS + React、CSS。每次您对新​​路线提出新请求时，从技术上讲，React 将与您的所有组件一起发货，并且将安装一个新商店。如果您想让您的商店持续存在，您必须允许您的应用程序像单页应用程序 (SPA) 一样路由。

如果您希望您的购物车持续存在，请尝试在您的数据库中创建一个购物车对象并为用户提供一个购物车。这样，它将无限期地持续下去。您可以通过 HTML 数据标签中的 JSON 对象或 React 中的 JSON API 请求将您的购物车数据传递给用户（首选）

你的问题基本上是在处理这个问题：这似乎是https://stackoverflow.com/a/3433048/8844929的副本

于 2019-03-19T15:34:22.493 回答