Обработка сложных многослойных данных формы в действии - флажки

Question

Я использую ловушку React useReducer для обработки сложных многослойных данных формы в состоянии.

Я следовал указаниям этого урока: https://levelup.gitconnected.com/handling-complex-form-state-using-react-hooks-76ee7bc937.

В учебнике состояние флажка устанавливается на верхнем уровне объекта состояния. Тем не менее, флажок My находится ниже верхнего слоя (точнее, уровня 3). Проблема в том, что мой компонент-флажок изменит свое значение состояния, но будет располагаться на верхнем уровне, а не там, где он должен быть на уровне 3.

Состояние учебника
isMember находится на верхнем уровне

const initialState = {
  firstName: "",
  lastName: "",
  address: {
    addressLine1: "",
    addressLine2: "",
    pinCode: ""
  },
  isMember: false
};

Мое состояние
включено ниже верхнего уровня

const initState = 
{
  radio:{
    tx: {
      name:'',
      enabled:'',//THIS IS WHERE THE STATE SHOULD CHANGE.
      parameters:{
        frequency:'',
        bandwidth:'', 
      },
    },
  }
  //BUT THIS IS WHERE IT IS GETTING SET.
};

Ниже приведена моя реализация функции updateForm:

const updateForm = React.useCallback(({ target: { value, name, type } }) => {
    const updatePath = name.split(".");
    console.log("updateForm | updatePath: ", updatePath);

    // Set top-level key-pairs.
    // Just need specific component & value to update.
    if (updatePath.length === 1) {
      const [id] = updatePath;

      dispatch({
        type: "TF",
        [id]: value
      });
    }

    // Set key-pairs that're below top-level.
    // Need "path" to component ('name') & value to update.
    // More condensed solution, rather than multiple if(length === 3,4,...).
    if (updatePath.length >= 2) {
      // Set checkboxes.
      if (type === "checkbox") {
        let elem = updatePath[updatePath.length - 1];

        dispatch(prevState => ({
          [name]: !prevState[name]
        }));
        return;
      }

      dispatch({
        _path: updatePath,
        _value: value
      });
    }
  }, []);

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

Я мог бы действительно использовать вашу помощь, чтобы понять, что происходит с отношением функции диспетчеризации / редуктора в этом руководстве. Из того, что я исследовал, это единственная реализация, которая использует тип конструктора параметра действия редуктора для принятия решений (используя конструктор === Function & constructor === Object). Из того, что я понимаю, обычно вместо этого используется оператор switch (), и это все, что я смог найти в Интернете.

Я также мог бы использовать вашу помощь, чтобы понять, как получить свой флажок для правильного изменения его значения. в состоянии. Как мне изменить состояние этого компонента, который находится ниже верхнего слоя?

Answer 1

Продолжив испытывать больше идей, я пришел к решению, с которым я могу жить. Надеемся, что это решение поможет всем, кто испытывает ту же проблему.

Я изменил флажок в моем updateForm () следующим образом:

updateForm ()

// Set checkboxes.
      if (type === "checkbox"){
        dispatch({
          _path: updatePath,
          _value: checked,
          _type: type
        });
        return;
      }

In метод reducer () Я полностью избегаю проверки на конструктор типа Function и реализую обработку данных флажка следующим образом:

reducer ()

if(has(updateArg, "_path") && has(updateArg, "_value") && has(updateArg, "_type")){
      const { _path, _value, _type } = updateArg;

      if(_type === "checkbox"){
        return produce(state, draft => {
          set(draft, _path, _value)
        })
      }
    }

Мне не особенно нравится это решение из-за использования свойства элемента флажок . Реализация учебника с использованием аргумента prevState будет моим предпочтением, но, очевидно, я не смог заставить его работать в моих обстоятельствах.

Если кто-то придумает лучшее решение, я отметит это как ответ. Буду признателен за любые мысли и мнения.