form x Server Actions x useFormStateの探求

hajimism

ここらへんを改めて理解する

hajimism

大まかな流れ

formData取得
validation
通信
revalidate

hajimism

今知りたいのはuseFormStateのあたりだな

hajimism

Server Actions内でthrow Errorしたら普通にclientのerror.tsxが呼ばれる

hajimism

自分が気になってるのはこっちで...

    return { message: 'Database Error: Failed to Delete Invoice' };

これがform stateなのよね？

hajimism

ここに本格的にかいてあったはず

hajimism

  const initialState = { message: null, errors: {} };
  const [state, dispatch] = useFormState(createInvoice, initialState);

reducerみたいな感じでactionとinitialStateを渡してstateとdispatchを生成する

hajimism

zod側でエラーメッセージを管理する

const FormSchema = z.object({
  id: z.string(),
  customerId: z.string({
    invalid_type_error: 'Please select a customer.',
  }),
  amount: z.coerce
    .number()
    .gt(0, { message: 'Please enter an amount greater than $0.' }),
  status: z.enum(['pending', 'paid'], {
    invalid_type_error: 'Please select an invoice status.',
  }),
  date: z.string(),
});

hajimism

actionのinterfaceが変わる。第一引数がState

export async function createInvoice(prevState: State, formData: FormData) {

hajimism

error.flatten()て何者だ

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.',
    };
  }

hajimism

こいつか

hajimism

こうなるらしい

if (!result.success) {
  console.log(result.error.flatten());
}
/*
  {
    formErrors: [],
    fieldErrors: {
      name: ['Expected string, received null'],
      contactInfo: ['Invalid email']
    },
  }
*/

hajimism

field名でそのエラーを取ってこれるっていうことか

hajimism

だからこうすると。

      <div id="customer-error" aria-live="polite" aria-atomic="true">
        {state.errors?.customerId &&
          state.errors.customerId.map((error: string) => (
            <p className="mt-2 text-sm text-red-500" key={error}>
              {error}
            </p>
          ))}
      </div>

hajimism

完全に理解した気がする。

hajimism

bindするときはbindしてから渡すし

  const initialState = { message: null, errors: {} };
  const updateInvoiceWithId = updateInvoice.bind(null, invoice.id);
  const [state, dispatch] = useFormState(updateInvoiceWithId, initialState);

formStateの前にbinded argsがくる

export async function updateInvoice(
  id: string,
  prevState: State,
  formData: FormData,
) {

hajimism

きみ何者なん

hajimism

The form state is the value returned by the action when the form was last submitted. If the form has not yet been submitted, it is the initial state that you pass.

form stateはactionの返り値。未actionならinitialState。

hajimism

initialState: The value you want the state to be initially. It can be any serializable value. This argument is ignored after the action is first invoked.

Stateはシリアライズ可能な値

hajimism

When used with a framework that supports React Server Components, useFormState lets you make forms interactive before JavaScript has executed on the client. When used without Server Components, it is equivalent to component local state.

どゆことやろか、わかる気がするけどわからん

hajimism

actionのシグネチャ変わるのちょっとキモいけどな、Reducerと同じって考えたら許せるかな

サイズちょっと気になるな

formの中で呼び出せば、直近のform submittionの状態を取ってこれるのか、簡単でつよいな。

const { pending, data, method, action } = useFormStatus();

hajimism

例としてボタンの状態管理に呼ばれてる。いいね。

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

hajimism

自前でlocal state作ってたのがなくなりそう。素晴らしい。