11

サンクredux-thunkとして知られる関数を記述する場合、簡単に抽象化できるボイラープレートがたくさんあります。たとえば、ほとんどの非同期 API 呼び出しでは、副作用なしで次のことを行っています。

export const LOGIN_REQUEST = 'my-app/auth/LOGIN_REQUEST';
export const LOGIN_RECIEVE = 'my-app/auth/LOGIN_RECIEVE';
export const LOGIN_FAILURE = 'my-app/auth/LOGIN_FAILURE';

// ... reducer code here

export function login(loginHandle, password) {
  return (dispatch, getState, api) => {
    dispatch({ type: LOGIN_REQUEST });

    api.post('/auth/login', { loginHandle, password }).then(
      response => dispatch({ type: LOGIN_RECIEVE, response }),
      error => dispatch({ type: LOGIN_FAILURE, error })
    );
  };
}

簡単!これはリクエストの少なくとも 70% をカバーしているため、上記のコードの割り当てを次のようなもの (疑似コード) に抽象化するエレガントな方法があると確信しています。

export function login(loginHandle, password) {
  return (dispatch, getState, api) => api('POST', LOGIN_REQUEST, '/auth/login', { loginHandle, password });
}

状態やその他の副作用を確認する必要がある場合は、適切なサンクに戻ることができます。ほとんどの場合...これを削減できますか?

エレガントなアイデアはありますか?

4

2 に答える 2