web-dev-qa-db-ja.com

反応コンポーネントでのreduxアクションのサブスクライブ

Webサービスからいくつかの情報をフェッチする非同期サンクがあります。3種類のアクションをディスパッチできます。

FETCH_REQUESTED
FETCH_SUCCEEDED
FETCH_FAILED

最後に、それが成功した場合。実際の応答またはエラーオブジェクトを返します。

操作が失敗したかどうかを検出するコンポーネントがあります。できれば、FETCH_FAILEDアクションをサブスクライブし、エラーのタイプ（404/401およびその他のステータスコード）に基づいてエラーメッセージを表示します。

export const fetchData = () => {
    return async (dispatch, getState) => {
        const appState = getState();

        const { uid } = appState.appReducer;

        await dispatch(fetchRequested());

        try {
            const response = await LookupApiFactory().fetch({ uid });

            dispatch(fetchSucceeded(response));

            return response;
        } catch (error) {
            dispatch(fetchFailed());

            return error;
        }
    }
}

私はreduxと反応にまったく慣れていないので、正しい方向に向かっているかどうかは少しわかりません。助けていただければ幸いです。

reactjsreact-nativereduxreact-reduxredux-thunk
4
animaonline

適切なreduxコールバックとストレージメカニズムを実装するには、すべてのデータを保持するストアが必要です。

const store = createStore(todos, ['Use Redux'])

次に、データをディスパッチして保存します。

store.dispatch({
  type: 'FETCH_FAILED',
  text: reposnse.status //Here you should give the failed response from api
});

次に、サブスクライブ関数を使用して、任意のコンポーネントのストアから値を取得できます。アクションがディスパッチされるたびに呼び出され、状態ツリーの一部が変更された可能性があります。

store.subscribe(()=>{
  store.getState().some.deep.property
})

これはReduxの単純な実装です。アプリがより複雑になるにつれて、リデューシング関数を個別の関数に分割し、それぞれがcombineReducersを使用して状態の独立した部分を管理するようにします。あなたは redux.jsサイト からより多くの情報を得ることができます

4
Rohith Murali

最も一般的なアプローチは、react-reduxライブラリのconnect関数を使用することです。これは、状態の変化をサブスクライブするHoCです。このライブラリを見てください。さらに、アクションクリエーターをディスパッチにバインドすることができます。これにより、コンポーネントからアクションをディスパッチすることができます。

次のように使用できます。

import React from 'react';
import { connect } from 'react-redux';

const MyComponent = ({ data, error }) => (
  <div>
    {error && (
      <span>Error occured: {error}</span>
    )}

    {!error && (
      <pre>{JSON.stringify(data, null, 2)}</pre>
    )}
  </div>
);

const mapStateToProps = (state) => ({
  data: state.appReducer.data,
  error: state.appReducer.error
});

export default connect(mapStateToProps)(MyComponent);

上に示したように、jsx内で条件付きレンダリングを使用するか、次のようにガード句を使用できます。

const MyComponent = ({ data, error }) => {
  if (error) {
    return (
      <span>Error occured: {error}</span>
    );
  }

  return (
    <pre>
      {JSON.stringify(data, null, 2)}
    </pre>
  );
}
0
Yuriy Yakym

レデューサーを想定して、

FETCH_FAILEDアクションの場合、何らかの障害があることを示す意味のあるフラグを設定できます。そのフラグに基づいて、エラーメッセージを表示したり、他のアクションを実行したりできます。

const testReducers =(state,actione)=>{

    case 'FETCH_FAILED' : {

        return {
            ...state,{ error_in_response : true }
        }
    };

    default : return state;
}

コンテナでは、そのフラグを取得してコンポーネントに渡すことができます。

combineReducersがレデューサーの組み合わせに使用されると仮定します。

const mapStateToProps=(state)=>{

    return {
        error_in_response : state.testReducers.error_in_response
    }
}
connect(mapStateToProps)(yourComponent)

コンポーネントでは、これにはthis.props.error_in_responseを使用してアクセスできます

0
RIYAJ KHAN