web-dev-qa-db-ja.com

別のレデューサー内からレデューサー状態にアクセスする

アクションがディスパッチされたときに適切な状態に戻すレジューサーを持っています。現在、一定の間隔でAPIを呼び出しているため、結果としてアクションが何度もトリガーされます。だから私が欲しいのは、レデューサーの状態にすでにデータがある場合、別のレデューサーは呼び出しが送信されている間、その状態を読み込み中として表示しないということです。初めてデータを受信するときは、ロード状態を維持する必要があります。きちんと説明できたらいいのに

これが私のコードスニペットです

ローディングステートレデューサー

const loading = (state = false, action) => {

    switch (action.type) {
    case 'GET_AUDIT_DATA':         // here I want to return true only when there is no data available
        return true
    case 'GET_AUDIT_DATA_RECEIVED':  
        return false
    case 'GET_AUDIT_DATA_ERROR':
        return false
    default:
        return state
    }
}

レデューサーの組み合わせ

const allReducers = combineReducers({
    auditData: AuditData,
    auditLoading: AuditLoading,
    modifiedOrders: ModifiedOrders
});

export default allReducers;

スーパーエージェントによってトリガーされたアクションでデータを返すリデューサー

const auditData = (state = [], action) => {
    switch(action.type) {
        case 'GET_AUDIT_DATA_RECEIVED': 
        console.log(action.data);
            return action.data;
        case 'GET_AUDIT_DATA_ERROR': 
            return action.err;
        default :
            return state;
    }
}
export default auditData;

したがって、最初はauditDataにはデータが含まれていません。最初の成功呼び出しの後にのみ、データが返されます。これが同時に呼び出されると、loading state reducerが呼び出され、監査データレデューサーにデータが含まれていない場合にのみ、GET_AUDIT_DATAアクションでtrueが返されます。

また、auditDataから現在取得したデータのみを返すのが正しい方法です。そうでない場合は、別の方法で行う必要があります。基本的に私はcurrent dataとoverwritenew oneを使いたいです。

reactjsreduxreact-reduxreducers
12
Shubham Khatri

続行する最良の方法は、他のレデューサーがすでにデータを持っているかどうかを知るための情報をLoading state reducerに送信することです。最後に持つには：

const loading = (state = false, action) => {

    switch (action.type) {
    case 'GET_AUDIT_DATA':
        if(!action.dataAlreadyInitialized){
            return true
        }
    case 'GET_AUDIT_DATA_RECEIVED':  
        return false
    case 'GET_AUDIT_DATA_ERROR':
        return false
    default:
        return state
    }
}

アクション関数からアプリケーションの状態へのアクセス権を持っている必要があります。

dispatch({
  type:'GET_AUDIT_DATA',
  dataAlreadyInitialized: appState.auditData.length > 0
});
2
Damien Leroux

ストアに対して getState() を呼び出して、リデューサーのリストとリデューサー内の現在の状態を取得できます。

  1. storeをauditLoadingにインポートします（値を取得するにはストアを使用します。ストアを変更しないでください）
  2. store.getState().auditLoadingは、auditLoadingレデューサーの状態を提供します。

このアプローチは、redux-thunkによって提供されるコールバックに似ています。 (dispatch, getState) => {}がアクションに返されます。

9
Pranesh Ravi
import store from '../../../redux/store'

console.log(store.getState().loginReducer.accessToken)

このステートメントを通じて、accessTokenの状態を取得します

1
Apurva Aggarwal