如何在反應組件中通過 redux state

Question

我正在開發一個使用 react 和 redux 進行 state 管理的應用程序。 在這里，我遇到了問題。 我有一個名為choose-address的組件，用戶在其中選擇地址，然后按下按鈕並被重定向到cart頁面，這在此處工作正常，但在購物車后它會轉到checkout-summery 。 在這個組件中，我需要用戶在choose-address組件中選擇的addressId ，但問題是如果我刷新checkout-summery頁面， addressid會返回到undefined 。 我無法弄清楚如何解決這個問題。 任何幫助都會很棒。

addressActions

///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);

Answer 1

您可以使用 redux persist，這將在刷新時保留您的 redux 存儲。

看看這個鏈接。

Answer 2

這就是數據一致性的問題。

為了保持將在整個應用程序流程中使用並在您刷新/重新加載應用程序后保留的數據，redux-persist 是一個選項。

這是文章的鏈接，其中包含在現有應用程序中集成和使用 package 的簡單但詳細的步驟。

希望這會幫助你。