RTK Thunk のfulfilled/rejected/pending関数

RTK のcreateAsyncThunk にてfulfilled/rejected/pending が生成される。
これらは関数として実行できるのだが、ドキュメントに使い方がなさそうだったので手もとで動かしてみて確認してみた。

• ポイント
  • thunk関数の引数の有無によって、actionの第3引数の有無も変わる
  • 各action+dispatch ごとに割り振られるrequestIDがあるが、これを明示的に割り当てないといけない

引数がないケース

export const thunkWithoutArgs = createAsyncThunk('thunkWithoutArgs', async () => {
  return 'actual return payload';
});

describe('async without args', () => {
  it('can create fulfilled', () => {
    const action = thunkWithoutArgs.fulfilled(
      'this is fake return payload',
      'this is fake request id',
    );
    expect(action).toEqual({
      meta: {
        arg: undefined,
        requestId: 'this is fake request id',
        requestStatus: 'fulfilled',
      },
      payload: 'this is fake return payload',
      type: 'thunkWithoutArgs/fulfilled',
    });
  });
});

引数があるケース

export const thunkWithArgs = createAsyncThunk('thunkWithArgs', async (arg1: string) => {
  return arg1 + ':actual return payload';
});

describe('async with args', () => {
  const action = thunkWithArgs.fulfilled(
    'this is fake return payload',
    'this is fake request id',
    'fake arg',
  );
  expect(action).toEqual({
    meta: {
      arg: 'fake arg',
      requestId: 'this is fake request id',
      requestStatus: 'fulfilled',
    },
    payload: 'this is fake return payload',
    type: 'thunkWithArgs/fulfilled',
  });
});

REF

• redux-toolkit/createAsyncThunk.ts at db0d7dc20939b62f8c59631cc030575b78642296 · reduxjs/redux-toolkit · GitHub
• redux-toolkit/createAsyncThunk.test.ts at db0d7dc20939b62f8c59631cc030575b78642296 · reduxjs/redux-toolkit · GitHub
• redux-toolkit/createAsyncThunk.ts at db0d7dc20939b62f8c59631cc030575b78642296 · reduxjs/redux-toolkit · GitHub