使用redux

Question

为什么我的道具返回未定义？我试图访问＆＃39; total＆＃39;，但未定义。我将其作为道具传递，但它以未定义的形式登录到控制台，并且在页面上也返回空白。我想我可能在某个地方犯了一个错误，因为我之前已经这样做过，而且它有效。

这是我的容器Store.js

import { connect } from 'react-redux';
import { getItems, getCurrency, getTotal} from '../ducks/cart';
import Store from '../components/Store';

const mapStateToProps = (state, props) => {
 return {
    total: getTotal(state, props)
}
}

export default connect(mapStateToProps)(Store);

这是我的Store.js组件：

import React, {Component} from 'react';
import { PropTypes } from 'react';
import Home from '../components/Home';
import Cart from '../containers/Cart';
import ProductList from '../containers/ProductList';
import Checkout from '../containers/Checkout';


const Store = ({ total }) => {

  console.error(total);

    return(
      <div className="container">
          <div className="row">
              <div className="col-md-12">

                  <h3>Armor and Weapon Store</h3>
                  <h4 className="badge badge-warning margin-right">Gold: {total} </h4>
              </div>
          </div>
          <div className="row">
              <div className="col-md-8">
                  <ProductList />
              </div>
              <div className="col-md-4">
                  <Cart />
                  <Checkout />
              </div>
          </div>


    </div>
    );
}

Store.propTypes = {
total: PropTypes.number,
}

export default Store;

这是我的redux东西Cart.js：

import { getProduct } from '../ducks/products';

// actions
const CART_ADD   = 'cart/ADD';
const CART_REMOVE = 'cart/REMOVE';

// reducer
const initialState = {
items: [], // array of product ids
currency: 'GOLD'
};

export default function cart(state = initialState, action = {}) {
switch (action.type) {
    case CART_ADD:
        return handleCartAdd(state, action.payload);
    case CART_REMOVE:
        return handleCartRemove(state, action.payload);
    default:
        return state;
}
}

function handleCartAdd(state, payload) {
return {
    ...state,
    items: [ ...state.items, payload.productId ]
};
}

function handleCartRemove(state, payload) {
return {
    ...state,
    items: state.items.filter(id => id !== payload.productId)
};
}

// action creators
export function addToCart(productId) {
return {
    type: CART_ADD,
    payload: {
        productId
    }
}
}

export function removeFromCart(productId) {
return {
    type: CART_REMOVE,
    payload: {
        productId
    }
}
}

// selectors
export function isInCart(state, props) {
 return state.cart.items.indexOf(props.id) !== -1;
}

export function getItems(state, props) {
return state.cart.items.map(id => getProduct(state, { id }));
}

export function getCurrency(state, props) {
return state.cart.currency;
}

export function getTotal(state, props) {
return state.cart.items.reduce((acc, id) => {
    const item = getProduct(state, { id });
    const total = acc + item.price;
    return acc + item.price;
}, 0);
}