javascript - 页面刷新或更改时保存通过 Redux 传递的数据时出现问题

Question

每当将此项目选择添加到购物车时，我都会尝试保存用户的项目选择。每当用户在特定商品上按下添加到购物车时，我都会使用 Redux 传递商品数据。在我的 Cart 组件中，我可以查看添加到购物车的最后一项的项目选择数据。此用户选择项目数据看起来像 Object {price: 25, item: "Hoodie", size: "medium"}。我希望能够将添加到购物车的每个选择存储在我的 Cart 组件中。这是购物车:

import React, { Component } from 'react';
import {addCart} from './Shop'; 
import { connect } from 'react-redux';

export class Cart extends Component {
    constructor(props) {
        super(props);
        this.state = {items: this.props.cart,cart: [],total: 0};
    }

    itemBucket(item) {
        this.state.cart.push(this.state.items);
        this.countTotal();
    }

    countTotal() {
        var total = 0;
        console.log(this.state.cart);
        this.state.cart.forEach(function(item, index){
            total = total + item.price;
            console.log (total);
        })
    }

    componentDidMount () {
        window.scrollTo(0, 0);
        this.itemBucket();
    }

    render() {
        return(
            <div className= "Webcart" id="Webcart">
                <addCart cartItem={this.props.cart} />
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

function mapStateToProps(state) {
  return { cart: state.cart };
}

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

我已将 itemBucket() 设置为将每个项目选择添加到在 state 中找到的购物车数组的函数。然而，这不起作用，只有最后添加到购物车的项目被传递。这可能与更改我的 Redux Store 的工作方式有关，但我真的不知道如何应用它。这是我的 Redux 商店:

import { createStore, applyMiddleware } from 'redux';
import  reducer  from './reducers';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';


const store = createStore(
  reducer,
  applyMiddleware(
    createLogger(),
    thunkMiddleware
  )
);
export default store; 

即使刷新或更改了页面，如何保存传递到 Cart 的每个项目？

编辑

这是我的 reducer 组件:

import {ADD_CART} from './actions';

export default Reducer;

var initialState = {
  cart:{},
  data: [],
  url: "/api/comments",
  pollInterval: 2000
};

function Reducer(state = initialState, action){
    switch(action.type){
        case ADD_CART:
            return {
                ...state,
                cart: action.payload
            }

            default:
                return state 
    };
}

Answer 1

我的建议是使用 redux-persist 将购物车状态保存到 localStorage。与编写自己的实现相比，它会容易得多，并且有一个活跃的社区(因此，如果您遇到任何问题/错误，您可能不是唯一一个)。

Redux 商店

import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import reducer from './reducers';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';

const store = createStore(
  reducer,
  undefined,
  compose(
    applyMiddleware(createLogger(), thunkMiddleware),
    autoRehydrate()
  )
);

persistStore(store, { whitelist: ['cart'] });

export default store; 

reducer

import { ADD_CART } from './actions';
import { REHYDRATE } from 'redux-persist/constants';

export default Reducer;

var initialState = {
  cart:{},
  data: [],
  url: "/api/comments",
  pollInterval: 2000
};

function Reducer(state = initialState, action){
  switch(action.type){
    case REHYDRATE:
      if (action.payload && action.payload.cart) {
        return { ...state, ...action.payload.cart };
      }
      return state;

    case ADD_CART:
      return {
        ...state,
        cart: action.payload
      }

      default:
        return state 
  };
}

请在此处查看完整文档:https://github.com/rt2zz/redux-persist