createStore不会从初始状态更改为操作证明值

Question

我正在尝试访问一个名为isSuperAdmin的变量，它基本上告诉我登录的用户是否是超级管理员，或者不允许我禁用某些功能。

我当前无权访问当前页面中的变量，但是我的redux操作显示该变量在那里，我认为我可能配置不正确，因为到目前为止，我的代码并未从的初始状态值更改null到布尔值isSuperUser。这是我要使用此变量的页面。

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { connect } from 'react-redux';
import Modal from '../Modal';
import Summary from '../Summary';
import s from './BookingDetailsModal.scss';
import AmendConsumerDetails from './AmendConsumerDetails';
import ChangeBookingSession from './ChangeBookingSession';
import payReservationCashActionCreator from '../../actions/payReservationCash';
import payReservationCardActionCreator from '../../actions/payReservationCard';
import payRestActionCreator from '../../actions/payRest';
import refundCashActionCreator from '../../actions/refundCash';
import cancelReservationActionCreator from '../../actions/cancelReservation';
import formatPrice from '../../../../../core/formatPrice';


import {
  BOXOFFICE_HIDE_BOOKING_DETAILS,
  BOXOFFICE_SET_BOOKING_DETAILS_ACTION_TYPE,
  resendConfirmationEmail as resendConfirmationEmailActionCreator,
} from '../../actions';

function renderActionButtons({
  isSuperAdmin,
  setActionType,
  resendConfirmationEmail,
  order: {
    type: orderType,
    paid: orderPaid,
    amount: orderAmount,
    refundedAt: orderRefundedAt,
    canceledAt: orderCanceledAt,
    sessionId,
  },
  isCreatingPayment,
  payReservationCard,
  payReservationCash,
  payRest,
  refundCash,
  cancelReservation,
}) {
  debugger;
  return (
    <div className={s.buttonsContainer}>
      <div className={s.buttonsContainer}>
        <div className={s.buttonContainer}>
          <button
            onClick={(e) => {
              e.preventDefault();
              setActionType('AMEND_CONSUMER_DETAILS');
            }}
          >Amend consumer details</button>
        </div>
        { sessionId ?
          <div className={s.buttonContainer}>
            <button
              onClick={(e) => {
                e.preventDefault();
                setActionType('CHANGE_SESSION');
              }}
            >Move to another session</button>
          </div> : null
        }
        <div className={s.buttonContainer}>
          <button disabled>Amend tickets or products</button>
        </div>
        { orderType === 'reservation' && isCreatingPayment && !orderPaid ?
          <div>
            <div className={s.buttonContainer}>
              <button
                onClick={(e) => {
                  e.preventDefault();
                  payReservationCash();
                }}
              >Pay Reservation CASH</button>
            </div>
            <div className={s.buttonContainer}>
              <button
                onClick={(e) => {
                  e.preventDefault();
                  payReservationCard();
                }}
              >Pay Reservation CARD</button>
            </div>
          </div> :
          null
        }
        { orderType === 'deposit' && isCreatingPayment && !orderPaid ?
          <div>
            <div className={s.buttonContainer}>
              <button
                onClick={(e) => {
                  e.preventDefault();
                  payRest('CASH');
                }}
              >Pay Rest CASH</button>
            </div>
            <div className={s.buttonContainer}>
              <button
                onClick={(e) => {
                  e.preventDefault();
                  payRest('CARD');
                }}
              >Pay Rest CARD</button>
            </div>
          </div> :
          null
        }
        { !orderRefundedAt && orderPaid ?
          <div className={s.buttonContainer}>
            <button
              disabled={isSuperAdmin}
              onClick={(e) => {
                e.preventDefault();
                refundCash(orderAmount);
              }}
            >Refund CASH, {formatPrice(orderAmount)}</button>
          </div> : null
        }
        { orderCanceledAt === null && orderType === 'reservation' ?
          <div className={s.buttonContainer}>
            <button
              onClick={(e) => {
                e.preventDefault();
                cancelReservation();
              }}
            >Cancel Reservation</button>
          </div> : null
        }
        <div className={s.buttonContainer}>
          <button
            onClick={(e) => {
              e.preventDefault();
              resendConfirmationEmail();
            }}
          >Resend confirmation email</button>
        </div>
      </div>
    </div>
  );
}

renderActionButtons.propTypes = {
  isSuperAdmin: PropTypes.bool.isRequired,
  setActionType: PropTypes.func.isRequired,
  resendConfirmationEmail: PropTypes.func.isRequired,
  order: PropTypes.shape({
    type: PropTypes.string.isRequired,
    paid: PropTypes.bool.isRequired,
    sessionId: PropTypes.string.isRequired,
    amount: PropTypes.number.isRequired,
    // reservationPaidCashAt: PropTypes.string.isRequired,
    // reservationPaidCardAt: PropTypes.string.isRequired,
  }).isRequired,
  payReservationCard: PropTypes.func.isRequired,
  payReservationCash: PropTypes.func.isRequired,
  payRest: PropTypes.func.isRequired,
  isCreatingPayment: PropTypes.bool.isRequired,
  refundCash: PropTypes.func.isRequired,
  cancelReservation: PropTypes.func.isRequired,
};

const components = {
  AMEND_CONSUMER_DETAILS: AmendConsumerDetails,
  CHANGE_SESSION: ChangeBookingSession,
};

function renderAction(actionType, props) {
  const Component = components[actionType];
  return <Component {...props} />;
}

function BookingDetailsModal(props) {
  const { hideOrderDetails, orderId, bookingDetailsActionType } = props;
  return (
    <Modal onClose={hideOrderDetails}>
      <div className={s.container}>
        <div className={s.summaryContainer}>
          <Summary orderId={orderId} withEdits={false} />
        </div>
        <div className={s.actionsContainer}>
          {bookingDetailsActionType ?
            renderAction(bookingDetailsActionType, props) :
            renderActionButtons(props)
          }
        </div>
      </div>
    </Modal>
  );
}

BookingDetailsModal.propTypes = {
  orderId: PropTypes.string.isRequired,
  hideOrderDetails: PropTypes.func.isRequired,
  bookingDetailsActionType: PropTypes.oneOf([
    'AMEND_CONSUMER_DETAILS',
  ]),
};

const mapStateToProps = (state, { orderId }) => (
  {
    ui: { bookingDetailsActionType },
    ui: { isSuperAdmin },
    orders: {
      data: { [orderId]: order },
      edits: { [orderId]: orderEdits },
    },
  }
) => ({
  bookingDetailsActionType,
  isSuperAdmin,
  order,
  isCreatingPayment: orderEdits.isCreatingPayment,
});

const mapDispatchToProps = (dispatch, { orderId }) => ({
  hideOrderDetails: () => dispatch({ type: BOXOFFICE_HIDE_BOOKING_DETAILS }),
  setActionType: actionType =>
    dispatch({ type: BOXOFFICE_SET_BOOKING_DETAILS_ACTION_TYPE, actionType }),
  resendConfirmationEmail: () => dispatch(resendConfirmationEmailActionCreator(orderId)),
  payReservationCard: () => dispatch(payReservationCardActionCreator(orderId)),
  payReservationCash: () => dispatch(payReservationCashActionCreator(orderId)),
  payRest: type => dispatch(payRestActionCreator(orderId, type)),
  refundCash: amount => dispatch(refundCashActionCreator(orderId, amount)),
  cancelReservation: () => dispatch(cancelReservationActionCreator(orderId)),
});

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(s)(BookingDetailsModal));

页面加载时我的Redux标签显示以下内容：

type(pin): "BOXOFFICE_IS_SUPER_USER"
isSuperAdmin(pin): true

这是我使用createStore访问变量的方式：

const isSuperAdmin = createStore(null, {
  [BOXOFFICE_IS_SUPER_USER]: isSuperAdmin => isSuperAdmin,
});

然后我将其添加到底部的减速器中。

编辑我已将createStore中的变量isSuperAdmin更改为true，这可以很好地理解，现在必须将变量传递给首先。

这是我获取变量值并将其传递的代码：

Export default ({ knex }) => authenticateAdmin(knex)(
  async (req, res) => {
    try {
      const { eventId } = req;
      const event = await fetchEvent(knex, eventId);
      const isSuperAdmin = await res.isSuperAdmin;
      res.send({ event, isSuperAdmin});
    } catch (err) {
      res.send(err.stack);
      console.error(err.stack); // eslint-disable-line no-console
      throw err;
    }
  }
);

和调度：

export const fetchEvent = () => async (dispatch, getState) => {
  try {
    const state = getState();
    const { auth: { password } } = state;

    const response = await fetch('/api/event', {
      headers: {
        Accept: 'application-json',
        'X-Password': password,
      },
    });
    if (response.status === 200) {
      const { event, isSuperAdmin } = await response.json();
      dispatch({ type: BOXOFFICE_SET_EVENT, event });
      dispatch({ type: BOXOFFICE_IS_SUPER_USER, isSuperAdmin });

    } else {
      localStorage.removeItem('password');
      dispatch({ type: BOXOFFICE_UNAUTHENTICATE });
    }
  } catch (err) {
    console.log(err); // eslint-disable-line no-console
    throw err;
  }
};

编辑

这是减速器：

export default combineReducers({
  isSuperAdmin,    -------    My variable
  isProcessingPayment,
  isSelectDateCollapsed,
  isLoadingBookings,
  shouldShowBookings,
  shouldShowDepositModal,
  shouldShowReservationModal,
  shouldShowConsumerDetailsModal,
  shouldShowDiscountModal,
  shouldShowOrderConfirmationModal,
  bookingFilter,
  selectedOrderId,
  sendConfirmationEmail,
  bookingIds,
  orderDetailsId,
  bookingDetailsActionType,
});

Answer 1

我猜您定义mapStateToProps的方式不正确。

更新了代码

尝试以下操作：

const mapStateToProps = ({
  ui: {
    bookingDetailsActionType,
    isSuperAdmin
  },
  orders: {
    data,
    edits
  }
}, {
  orderId
}) => {
  const order = data[orderId],
    orderEdits = edits[orderId];
  return {
    bookingDetailsActionType,
    isSuperAdmin,
    order,
    isCreatingPayment: orderEdits.isCreatingPayment
  };
};

Answer 2

我终于有了解决方案！原来我的问题不是为我的isSuperUser变量设置属性类型。尽管我的同事告诉我，它将在没有任何属性类型的情况下都可以工作（这对我来说仍然很有意义，并且使我困惑为什么它不起作用？！）。

index.js文件中的一个简单更改，来自：

[BOXOFFICE_IS_SUPER_USER]: isSuperAdmin => isSuperAdmin,

到

  [BOXOFFICE_IS_SUPER_USER]: (state, { isSuperAdmin }) => isSuperAdmin,

并在我使用res.send（）的show.js文件中添加属性类型

  res.send({ event, isSuperAdmin: isSuperAdmin});

我仍然不知道为什么它不能在没有属性类型的情况下工作，但是，好吧...！