減速機で非同期の約束を扱う方法

Question

私はreduxには新しく、認証の使用例の簡単な例を解明しようとしています。このコードのWebバージョンは、localstorageから初期状態を取得し、localstorageにも設定します。この例をreact-nativeに変換すると、localstorageが非同期のAsyncStorageに変更され、約束が返されます。

減速機で非同期初期化子を処理するにはどうすればよいですか？

import { AsyncStorage } from 'react-native'; 
import { 
    LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS, 
} from '../actions/login'; 


const initialState = { 
    isFetching: false, 
    token: null, // AsyncStorage.getItem('token'), 
    profile: null, // AsyncStorage.getItem('profile'), 
    isLoggedIn: false, 
    errorMessage: null, 
}; 

// The auth reducer. The starting state sets authentication 
// based on a token in asyncstorage. In addition we would also null 
// the token if we check that it's expired 
export default (state = initialState, action) => { 
    switch (action.type) { 
    case LOGIN_REQUEST: 
     return Object.assign({}, state, { 
     isFetching: true, 
     isLoggedIn: false, 
     token: null, 
     user: null, 
     errorMessage: '', 
     }); 
    case LOGIN_SUCCESS: 
     // todo set the async 
     // AsyncStorage.multiSet(['token', 'profile'], [action.token, action.profile]) 
     return Object.assign({}, state, { 
     isFetching: false, 
     isLoggedIn: true, 
     token: action.token, 
     user: action.profile, 
     errorMessage: '', 
     }); 
    case LOGIN_FAILURE: 
     return Object.assign({}, state, { 
     isFetching: false, 
     isLoggedIn: false, 
     token: null, 
     errorMessage: action.message, 
     }); 
    case LOGOUT_SUCCESS: 
     // AsyncStorage.multiRemove(['token', 'profile']) 
     return Object.assign({}, state, { 
     isFetching: true, 
     isLoggedIn: false, 
     token: null, 
     }); 
    default: 
     return state; 
    } 
}; 

Answer 1

AsyncStorageから初期データをフェッチするアクションの作成者を作成します。あなたのアプリケーションがロードされたらtokenまたはprofileというキーでアクションを送信します（ルートコンポーネントのcomponentDidMountでこれを行うことができます）。

// create similar actions creators for 'setItem' and 'multiSet' ops 
export function loadLocalData(key) { 
    return { 
    types: [LOAD_LOCAL_DATA, LOAD_LOCAL_DATA_SUCCESS, LOAD_LOCAL_DATA_FAIL] 
    asyncStoragePromise:() => AsyncStorage.getItem(key), 
    key, 
    } 
} 

---

今AsyncStorage操作のためのmiddlewareを作成します。 storeを作成するときは、applyMiddlewareを必ず作成してください。

ミドルウェアのための最も一般的な使用例は、多くの定型コードまたはRxのようなライブラリ に依存することなく、非同期 行動を支援することです。これは、非同期アクションを通常のアクションに加えて をディスパッチさせることで可能になります。最終的にここに

export default function asyncStorageMiddleware() { 
    return ({ dispatch, getState }) => next => (action) => { 
    if (typeof action === 'function') { 
     return action(dispatch, getState); 
    } 

    const { asyncStoragePromise, types, ...rest } = action; 

    if (!asyncStoragePromise) { 
     return next(action); 
    } 

    const [REQUEST, SUCCESS, FAILURE] = types; 

    next({ ...rest, type: REQUEST }); 

    const actionPromise = asyncStoragePromise(); 
    actionPromise 
     .then(result => next({ ...rest, result, type: SUCCESS })) 
     .catch(error => next({ ...rest, error, type: FAILURE })); 

    return actionPromise; 
    }; 
} 

---

あなた初期状態です：

const initialState = { 
    isFetching: false, 
    token: null, 
    profile: null, 
    isLoggedIn: false, 
    errorMessage: null, 
    localLoadErr: '', 
}; 

と減速：

LOAD_LOCAL_DATA_SUCCESS: 
    return { 
    ...state, 
    [action.key]: action.result, 
    }; 
    break; 

LOAD_LOCAL_DATA_FAIL: 
    return { 
    ...state, 
    localLoadErr: action.error, 
    }; 
    break;