0

ページを切り替えたい場所を取得する際にReduxストアに問題があり、react_on_rails正しく機能しません。ページを変更したりリロードしたりすると、redux ストアが失われます。また、私が入れたコードの山で申し訳ありませんが、他に何も、またはそれを修正する方法を本当に知りません. react_on_railsand 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);
};

レデューサー/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