javascript - 如何在使用 react-router 和 redux 的同时维护商店的状态？

Question

我正在构建一个本质上模拟电子商务的应用程序原型(prototype)。我有一些组件，每个组件都有可以添加到购物车的不同项目(下面我只展示一个基本工作原理的示例)。使用 react-router 通过不同的路由访问这些组件。有一个标题组件显示当前购物车中的商品数量。 header 从 redux 存储中的状态获取购物车中的商品数量。但是，如果我导航到一条新路线，商店会回到默认状态。当导航到新路线时，我需要商店保持其状态。例如，如果我转到 ShoppingPage，将商品添加到购物车，然后返回主页，我需要购物车中仍然有商品。

actions.js

export const actionTypes = Object.freeze({
    UPDATE_CART: Symbol('UPDATE_CART'),
});

export const updateCart = (payload) => {
    return {
        type: actionTypes.UPDATE_CART,
        payload,
    };
};

export default actionTypes;

reducer.js

import actions from './actions';

export const INITIAL_STATE = {
    cart: [],
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case actions.UPDATE_CART: {
            return {
                ...state,
                cart: action.payload,
            };
        }
        default: {
            return state;
        }
    };
};

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer, { INITIAL_STATE } from './reducer';

const store = createStore(reducer, INITIAL_STATE);
console.log(store.getState());
ReactDOM.render(
<Provider store ={store}>
    <BrowserRouter>
        <App />
    </BrowserRouter>
</Provider>
, document.getElementById('root'));

serviceWorker.unregister();

ShoppingPage.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { updateCart } from './actions';

class ShoppingPage extends Component {
    addToCart = () => {
        const cart = [...this.props.cart];
        cart.push('new item');
        this.props.modifyCart(cart);

    render() {
        return(
            <div>
                <button onClick={addToCart}>
                    Add To Cart
                </button>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => ({
    modifyCart: payload => dispatch(updateCart(payload)),
});

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

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(ShoppingPage);

Home.js

import React, { Component } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';

class Home extends Component {
    render() {
        return(
            <div>
                <ListGroup>
                    <ListGroupItem><a href='/ShoppingPage'>ShoppingPage</a></ListGroupItem>
            </div>
        )
    }
}

export default Home;

Header.js

import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import { connect } from 'react-redux';

class Header extends Component {
    render() {
        return(
            <Navbar sticky='top' className='nav'>
                <NavbarBrand href='/'>Online Shopping</NavbarBrand>
                    <span>{'Items in Cart: '}{this.props.cart.length}</span>
            </Navbar>
        )
    }
}

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

export default connect(
    mapStateToProps
)(Header);

Routes.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import ShoppingPage from './ShoppingPage';

const Routes = () => (
    <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/ShoppingPage' component={ShoppingPage} />
    </Switch>
);

export default Routes;

App.js

import React from 'react';
import Routes from './Routes';
import Header from './Header';

function App() {
  return (
    <div>
        <Header />
        <Routes />
    </div>
  );
}

export default App;

Answer 1

可能发生的情况是，在导航过程中，网络应用程序再次“重新加载”(这正在删除 redux 状态)。为了使用 React 路由器导航，您需要查看 <Link> .

例如，

首页.js

<a href='/ShoppingPage'>ShoppingPage</a>

应该改为:

<Link to="/ShoppingPage">ShoppingPage</Link>