1

我创建了这个代码框来突出问题。

我为反应钩子可中止提取创建了一个状态机。

我可以让它工作的唯一方法是让所有状态都处于同一级别：

export interface AbortableSchema {
  states: {
    [AbortableStates.Idle]: {};
    [AbortableStates.Loading]: {};
    [AbortableStates.Succeded]: {};
    [AbortableStates.Error]: {};
    [AbortableStates.Aborted]: {};
  };
}

export const createAbortableMachine = <D>(): StateMachine<
  AbortableState<D>,
  AbortableSchema,
  AbortableActions<D>
> => {
  const context: AbortableState<D> = {
    state: AbortableStates.Idle,
    data: undefined,
    error: undefined
  };

  const abortableMachine = Machine<
    AbortableState<D>,
    AbortableSchema,
    AbortableActions<D>
  >({
    id: "fetchable",
    initial: AbortableStates.Idle,
    context,
    states: {
      [AbortableStates.Idle]: {
        on: { START: AbortableStates.Loading }
      },
      [AbortableStates.Loading]: {
        on: {
          [AbortableActionTypes.Success]: {
            target: AbortableStates.Succeded,
            actions: (context, event) => {
              context.data = { ...event.payload };
            }
          },
          [AbortableActionTypes.Error]: {
            target: [AbortableStates.Error],
            actions: (context, event) => {
              context.error = { ...event.error };
            }
          },
          [AbortableActionTypes.Abort]: {
            target: [AbortableStates.Aborted]
          }
        }
      },
      [AbortableStates.Succeded]: {
        on: {
          [AbortableActionTypes.Reset]: {
            target: AbortableStates.Idle,
            actions: (_context, event) => {
              _context = context;
              return _context;
            }
          }
        }
      },
      [AbortableStates.Error]: {
        on: {
          [AbortableActionTypes.Reset]: {
            target: AbortableStates.Idle,
            actions: (_context, event) => {
              _context = context;
              return _context;
            }
          }
        }
      },
      [AbortableStates.Aborted]: {
        on: {
          [AbortableActionTypes.Reset]: {
            target: AbortableStates.Idle,
            actions: (_context, event) => {
              _context = context;
              return _context;
            }
          }
        }
      }
    }
  });

  return abortableMachine;
};

但对我来说，嵌套这样的状态更有意义：

export interface AbortableSchema {
  states: {
    [AbortableStates.Idle]: {};
    [AbortableStates.Loading]: {
      states: {
        [AbortableStates.Succeded]: {};
        [AbortableStates.Error]: {};
        [AbortableStates.Aborted]: {};
      };
    };
  };
}

export const createAbortableMachine = <D>(): StateMachine<
  AbortableState<D>,
  AbortableSchema,
  AbortableActions<D>
> => {
  const context: AbortableState<D> = {
    state: AbortableStates.Idle,
    data: undefined,
    error: undefined
  };

  const abortableMachine = Machine<
    AbortableState<D>,
    AbortableSchema,
    AbortableActions<D>
  >({
    id: "fetchable",
    initial: AbortableStates.Idle,
    context,
    states: {
      [AbortableStates.Idle]: {
        on: { START: AbortableStates.Loading }
      },
      [AbortableStates.Loading]: {
        on: {
          [AbortableActionTypes.Success]: {
            target: AbortableStates.Succeded,
            actions: (context, event) => {
              context.data = { ...event.payload };
            }
          },
          [AbortableActionTypes.Error]: {
            target: [AbortableStates.Error],
            actions: (context, event) => {
              context.error = { ...event.error };
            }
          },
          [AbortableActionTypes.Abort]: {
            target: [AbortableStates.Aborted]
          }
        },
        states: {
          [AbortableStates.Succeded]: {
            on: {
              [AbortableActionTypes.Reset]: {
                target: AbortableStates.Idle,
                actions: (_context, event) => {
                  _context = context;
                  return _context;
                }
              }
            }
          },
          [AbortableStates.Error]: {
            on: {
              [AbortableActionTypes.Reset]: {
                target: AbortableStates.Idle,
                actions: (_context, event) => {
                  _context = context;
                  return _context;
                }
              }
            }
          },
          [AbortableStates.Aborted]: {
            on: {
              [AbortableActionTypes.Reset]: {
                target: AbortableStates.Idle,
                actions: (_context, event) => {
                  _context = context;
                  return _context;
                }
              }
            }
          }
        }
      }
    }
  });

  return abortableMachine;
};

加载有子状态，但如果我这样做，我会收到以下错误消息：

状态节点“fetchable.loading”的无效转换定义：“fetchable”上不存在子状态“succeeded”

4

1 回答 1

0

当您使用州名时，它们不是绝对的。他们是兄弟姐妹的亲戚。例如，如果您"success"在顶层定义了一个状态，那么您只能在该状态的同级中引用该确切字符串；不是兄弟姐妹的孩子。然后，您必须通过 ID 引用它。

于 2020-05-17T02:39:55.650 回答