Question

我正在尝试通过两个单独的动作功能进行设置屏幕。一个用于lb \ kg，另一个用于体重和卡路里，但是，如果我更改其中一个功能，另一个功能会隐藏吗？或从屏幕上删除。

我应该得到150磅的地方，我可以得到150或磅，它们都是由单独的动作创建的。我在做什么错了？

减速器道具的显示位置。

<Text style={globalStyles.defaultText}>
  Current Weight:{" "}
    <Text>
      {personalWeight} <--- be like 150
      {weightProp} <---- be like lb
    </Text>
    {"\n"}
</Text>

操作页面：

export const DISTANCE_SETTINGS = "DISTANCE_SETTINGS";
export const WEIGHT_SETTINGS = "WEIGHT_SETTINGS";
export const ALLINPUT_SETTINGS = "ALLINPUT_SETTINGS";

// settings button lists
export const settingsAction = (buttonGroupName, actionId) => dispatch => {
  switch (buttonGroupName) {
    case "distance":
      dispatch({
        type: DISTANCE_SETTINGS,
        payload: actionId
      });
      break;
    case "weight":
      dispatch({
        type: WEIGHT_SETTINGS,
        payload: actionId
      });
      break;
    default:
      alert("There was an error somewhere");
  }
};

// settings input options weight/calories
export const settingsInputs = data => dispatch => {
  dispatch({
    type: ALLINPUT_SETTINGS,
    payload: data
  });
};

减速器页面：

import {
  DISTANCE_SETTINGS,
  WEIGHT_SETTINGS,
  ALLINPUT_SETTINGS
} from "../actions/settingsAction";

export const inititalState = {
  profile: {
    weight: 150,
    caloriesBurned: 100,
    distanceSettings: "",
    weightSettings: ""
  }
};

export default function(state = inititalState, action) {
  switch (action.type) {
    case DISTANCE_SETTINGS:
      return {
        ...state,
        profile: {
          distanceSettings: action.payload
        }
      };
    case WEIGHT_SETTINGS:
      let conversion = `${action.payload === "Pounds" ? "lb" : "kg"}`;
      return {
        ...state,
        profile: {
          weightSettings: conversion
        }
      };
    case ALLINPUT_SETTINGS:
      return {
        ...state,
        profile: {
          weight: action.payload.weight,
          caloriesBurned: action.payload.calories
        }
      };
    default:
      return state;
  }
}

Answer 1

您的减速器应为：

export default function(state = inititalState, action) {
  switch (action.type) {
    case DISTANCE_SETTINGS:
      return {
        ...state,
        profile: {
          ...state.profile, // You don't have it
          distanceSettings: action.payload
        }
      };
    case WEIGHT_SETTINGS:
      let conversion = `${action.payload === "Pounds" ? "lb" : "kg"}`;
      return {
        ...state,
        profile: {
          ...state.profile, // You don't have it
          weightSettings: conversion
        }
      };
    case ALLINPUT_SETTINGS:
      return {
        ...state,
        profile: {
          ...state.profile, // You don't have it
          weight: action.payload.weight,
          caloriesBurned: action.payload.calories
        }
      };
    default:
      return state;
  }
}

React Native Redux Action正在删除显示屏上的其他操作

1 个答案: