Reduxソースコード分析-5、非同期作用の原理

反応サンク

ソースコードが短すぎます：

const middleware: ThunkMiddleware<State, BasicAction, ExtraThunkArg> =
  ({
    
     dispatch, getState }) =>
  next =>
  action => {
    
    
    // The thunk middleware looks for any functions that were passed to `store.dispatch`.
    // If this "action" is really a function, call it and return the result.
    if (typeof action === 'function') {
    
    
      // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
      return action(dispatch, getState, extraArgument)
    }

    // Otherwise, pass the action down the middleware chain as usual
    return next(action)
  }
return middleware

1.標準のReactミドルウェア。

それはすべて固定コードです。

const middleware: ThunkMiddleware<State, BasicAction, ExtraThunkArg> =
  ({
    
     dispatch, getState }) =>
  next =>
  action => {
    
    
		//...
  }
return middleware

2.アクションが関数の場合はそれを呼び出し、そうでない場合は放します。

if (typeof action === 'function') {
    
    
  return action(dispatch, getState, extraArgument)
}

return next(action)

つまり、サンクは機能的なアクションをサポートするだけです。

例えば

カウンターケースでのアクション：

export const Normal = v => ({
    
    
	type: "Normal", amount: v
})
export const Async = (v, time) => {
    
    
	return (dispatch) => {
    
    
		setTimeout(() => {
    
    
			dispatch(Normal(v));
		}, time);
	}
}

サンクがこのアクションを受け取ると、サンクはそれを直接呼び出します。内部非同期コードを実行します。

最後の問題は同期アクションです。