4

私が9歳のようにcreateAsyncThunkを何とどのように使用するかを誰かに説明してもらえますか? アクション文字列は何のためのものですか? ロジック/パスの理由で一時的に作成され、すぐに破棄されますか? アクション文字列で何ができますか / 人々は通常何に使用しますか? 私はドキュメントをずっと見つめていましたが、理解できません。

これは、他の誰かがコードを使用した方法です。誰かがこれを解読できれば、私はとても幸せです.

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

公式ドキュメント: https://redux-toolkit.js.org/api/createAsyncThunk

4

1 に答える 1

9

Async Thunk 関数と Reducer 関数を別々のタイプに分けることができます。それらはまったく同じではありません。そのことに注意してください。

レデューサー関数は非同期コードを実行できず、コードを実行して状態を更新できますが、サーバーから何かを取得または更新してから Redux の状態を更新する場合、レデューサーを使用するだけではこれを達成できません。機能。

そのため、アクション クリエーター (または AsyncThunk 関数) が必要です。これにより、非同期コードを実行し、Redux の実際の状態を更新できます。

const action =

最初の引数と2番目createAsyncThunkの引数の2つの引数を受け取る別の関数（この場合）を受け取る定数を定義しますaction typepayloadCreator callback

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {

この場合action、定義済みのオブジェクト (createAsyncThunk) を受け取ります。

レデューサー関数を使用するには、通常 2 つのパラメーターが必要actionTypeですpayload。

createAsyncThunk を使用すると、受け取る最初のパラメーターは actionType です。'send/sendAction'これは、リデューサーが受け取る actionType であり、2 つのパラメーターを受け取る非同期部分はペイロード ジェネレーターです。

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId;
  return data;
}

actionType関数 createAsyncThunk はそのまま2 つのパラメーターを返しますPayload。

メソッドを使用する場合は、次のようにする必要があります。

dispatch(action(formValuesFromLocalState, APIInstance));

この場合、その関数に渡す引数またはパラメーター (formValuesFromLocalState および APIInstance) は非同期関数に渡されるため、次のようになります。

const action = createAsyncThunk('send/sendAction', async (form = formValuesFromLocalState, thunkAPI = APIInstance)

これらのパラメーターを使用して、メソッドが実行される方法、または実行したい方法は、次のようになります。

const action = createAsyncThunk('send/sendAction', async (form, thunkAPI) => {
  const object = /some specific way you want to morph the form values/
  const data = await axios.post('/api', object);
  data.reduxRequestId = thunkAPI.requestId; 
  return data;  (this is the actual data which will be returned as a payload).
}

ドキュメントでは、彼らはより良い例を挙げています

関数は次のように実行されます。

dispatch(fetchUserById(123))

実際の機能は次のとおりです。

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

したがって、関数はこの場合のみ受信し、userId使用thunkAPIされません。

'users/fetchByIdStatus'

ディスパッチされる actionType です。

const response = await userAPI.fetchById(userId)
        return response.data

API 呼び出しは非同期コードであり、return ステートメントreturn response.data は実際のペイロードです。

最終的に、ディスパッチ関数は次のようになります。

dispatch({type:'users/fetchByIdStatus', payload:(whatever response.data has)});

この説明が理解できることを願っています。私の下手な英語をお許しください。

于 2020-06-14T04:34:15.617 に答える