javascript - 如何在反应组件中传递redux状态

问题描述

我正在开发一个使用 react 和 redux 进行状态管理的应用程序。在这里，我遇到了问题。我有一个名为的组件choose-address，用户在该组件中选择地址，然后按下按钮并被重定向到cart页面，这在此处工作正常，但在购物车后它会转到checkout-summery. 在这个组件中，我需要addressId在组件中选择了哪个用户，choose-address但问题是如果我刷新checkout-summery页面addressid返回到undefined. 我无法弄清楚如何解决这个问题。任何帮助都会很棒。

地址动作

///address ui
export const chooseAddress = addressId => ({
  type: types.CHOOSE_ADDRESS,
  addressId
});

地址UiReducer

const initialState = {
  addressChosen: null
};

export default (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.CHOOSE_ADDRESS:
      return {
        ...state,
        addressChosen: action.addressId
      };
    default:
      return state;
  }
};

选择地址.jsx

 <Grid className="choose-address">
          {addressList.map(address => (
            <AddresListItem
              address={address}
              deleteAddress={deleteAddress}
              chooseAddress={chooseAddress}
              uiState={uiState}
            />
          ))}
          <Grid className="margin15" container justify="center">
            <Grid xs={8}>
              <Button
                variant="outlined"
                title={"+ ADD NEW ADDRESS"}
                onClick={() => {
                  history.push("/add-new-address");
                }}
              />
            </Grid>
          </Grid>
          <br />
          {uiState.addressChosen !== null && (
            <Button
              title={"Continue"}
              onClick={() => {
                history.push("/cart");
              }}
            />
          )}

选择地址容器.jsx

class ChooseAddressContainer extends React.Component {
  componentDidMount() {
    this.props.getUserAddress();
  }
  render() {
    const {
      addressList,
      deleteAddress,
      history,
      chooseAddress,
      uiState
    } = this.props;
    return (
      <Grid className="global-padding">
        <ChooseAddress
          history={history}
          chooseAddress={chooseAddress}
          deleteAddress={deleteAddress}
          addressList={addressList}
          uiState={uiState}
        />
      </Grid>
    );
  }
}

const mapstateToProps = state => {
  return {
    addressList: state.address.data.addressMultiple.addressList,
    uiState: state.address.ui
  };
};

export default connect(
  mapstateToProps,
  {
    getUserAddress,
    deleteAddress,
    chooseAddress
  }
)(ChooseAddressContainer);

标签： javascriptreactjs

javascript - 如何在反应组件中传递redux状态

问题描述

解决方案

推荐阅读