Редукс не показывать реквизит на другой странице

Question

У меня есть навигационная панель для всех страниц.Я хочу сделать в нем корзину, однако, когда я перехожу на внутреннюю страницу продукта, пропускаемые мной реквизиты не отображаются.

Почему это происходит?Я думаю, что это моя проблема React router v4 не работает с Redux , но как я могу это реализовать?Как вы думаете?

App.js

   import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {
  BrowserRouter,
  Route,
  Switch
} from "react-router-dom";

import './App.css';
import NavbarMenu from './components/navbar'
import Main from './components/main';
import Good from './components/good';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavbarMenu/>
          <Container>
            <Switch>
              <Route path="/" exact component={Main}/>
              <Route path="/good/:id" component={Good}/>
            </Switch>
          </Container>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

navbar

  import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from 'reactstrap';
import {withRouter} from 'react-router-dom';
import connect from 'react-redux/es/connect/connect';
import {getCart} from '../../redux/actions/cartAction';

class NavbarMenu extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
console.log(this.props)
    const cartLength = this.props.cart.length;
    const cartItems = this.props.cart.map(e => {
      return <div key={e.id} style={{marginBottom: '20px'}}>
        <DropdownItem
          style={{display: 'inline-block', width: 'auto'}}
          onClick={() => {
            this.props.history.push('/good/' + e.id)
          }}>
          {e.name}
        </DropdownItem>
        <Button
          style={{display: 'inline-block', float: 'right', marginRight: '20px'}}
          color="danger"
        >X</Button>
      </div>
    });

    return (
      <Navbar
        color="light"
        light expand="md"
        style={{marginBottom: '20px'}}
      >
        <NavbarBrand
          style={{cursor: 'pointer'}}
          onClick={() => {
            this.props.history.push('/')
          }}
        >
          Shop
        </NavbarBrand>
        <NavbarToggler onClick={this.toggle}/>
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav className="ml-auto" navbar>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                Cart: {cartLength} items
              </DropdownToggle>
              <DropdownMenu right style={{width: '300px'}}>
                {cartItems}

                <DropdownItem divider/>

              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
        </Collapse>
      </Navbar>
    );
  }
}

const mapStateToProps = state => ({
  cart: state.cart.cart
});

export default withRouter(connect(mapStateToProps, {getCart})(NavbarMenu));

Answer 1

Я решил свою проблему, добавив этот код

componentDidMount() {
   this.props.getCart();
}

Answer 2

Исходя из предоставленных вами оттисков, вы открываете элемент в другом окне, поэтому переменные в сеансе в окне не передаются.

Одно из возможных решений - сохранитьчасти вашего магазина, которые вам понадобятся позже в браузере localStorage.

Вы можете сделать это, используя функцию подписки Redux.

Примером может быть:

localStorage.js

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if (serializedState === null) return undefined;

    return JSON.parse(serializedState);
  } catch (err) { return undefined; }
};

export const saveState = (state) => {
  try {
    const serializedState = JSON.stringify(state);
  } catch (err) {
    // errors
  }
}

А в магазине редуксов вы можете положить:

import { loadState, saveState } from './localStorage'; 

const persistedState = loadState();
const store = createStore(persistedState);

store.subscribe(() => saveState(store.getState()));

Источник: https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage