React Native Redux Action удаляет другие действия на экране дисплея

Question

Я пытаюсь сделать экран настроек с двумя отдельными функциями действий.один за фунт / кг и другой за вес и калории, однако, если я изменю одну из функций, другая будет скрыта?или удалены с экрана.

Где я должен получить 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;
  }
}