反応したネイティブアプリケーションでの使用法

Question

私はreact-nativeアンドロイドアプリケーションで実装するためにreduxを学習しています。私はそれがアプリケーションの状態を維持するのに役立つことがわかります。

たとえば、ユーザーがログオンしている場合は、ユーザーの状態を本当の種類に記録するのに役立ちます。私は正しい例を取ったことを願っている。私はreact-nativeがAsyncStorageを持っているのを見ています。ユーザーがログしているかどうかにかかわらずこれを保存することもできます。

ユーザがログした後にロジックを書き込んで、AsyncStorageにtrueを設定し、ログアウト時にfalseを書き込むことができます。さて、スプラッシュ画面でこれが真か偽かをチェックし、それに応じてナビゲートしてください。

AsyncStorageを使用してこの状態を管理することができます。次に、react-nativeアプリケーションのreduxの使用例は何か混乱しています。誰かが例を挙げて説明できますか？

Answer 1

AsyncStorageはreact-native用ですlocalStorageはブラウザ用ですが、非同期です。

JWTを認証に使用すると仮定して、AsyncStorageを使用してトークンを格納できます。アプリケーションのあなたの入力画面で

// on login 
AsyncStorage.setItem('@token', value) 

、あなたはAsyncStorageからトークンを取得することができ、トークンの復号化された値に基づいて、あなたはストアを更新し、リダイレクトを行うことができます。とにかく

// componentWillMount 
AsyncStorage.getItem('@token') 
    .then(token => { 

    const decodedToken = decodeToken(token) 

    if (isExpired(decodeToken)) // redirect to login 

    // save the values to the store 
    someAction(decodedToken) 

    }) 

、アプリケーションでReduxの使用している場合は、関係なく、フレームワークは、アプリケーションの状態に関連するすべてのものが再来によって処理されなければなりません。結論として

AsyncStorageに、あなたはAsyncStorageのトークンを格納する必要がありますが、資格情報を保存

Answer 2

... isConnected, isLoggedIn, userような状態ではない（または重要/重要な情報）が本当に安全ではありません。あなたが見たい場所を知っていればアクセスできます:)

私もreact-nativeアプリケーションで作業していました。暗号化されたトークンをAsyncStorageに保存します。ユーザーがログインすると、私はそのトークンを取得し、サーバー（ログインapi）を呼び出して、accessToken（サーバーによる検証が行われます）を取得します。すべてのAPI呼び出しでこれをaccessTokenに渡す必要があります。 axiosとapolloの組み合わせを使用していますので、このaccessTokenを私の還元店に一度ログインしてそこから読み取ってください。

私はまた、いくつかのより多くの場所でReduxの使用

： -

1. オープニング/いくつかの場所でキーボードを閉じる場合トークンにログインページにリダイレクト
2. の有効期限が切れて

はそれが助けを願っ:)

Answer 3

Redux（と他のすべてのフレームワーク）は、開発者が開発している製品全体で共通のデザインを持つことができるため、チームで開発するときに価値があると思います新たな同僚のオンボーディング期間を大幅に短縮します。

技術的な部分については、小さなコードベースの場合、私はReduxを推奨しません。なぜなら、それはあなたの頭痛を引き起こすだけなので、なぜこれらの定型文が必要なのか疑問に思うでしょう。

一方、製品が継続的に成長している場合、Reduxを使用することで、複雑さを軽減してコードベースを拡張できます。

Answer 4

自分でAsyncStorageを処理するのではなく、redux-persistを調べてください。このようにすれば、あなたはreduxの状態をそのまま扱うことができ、redux-persitはAsyncStorageからのトークンの格納と取得を処理します。

Answer 5

アプリケーションでこの3つのステップを実行することをお勧めします。AsyncStorageを使用して状態を自動的に読み込んで保存し、任意のコンポーネントでアクセスできます。

1）ロードするセットアップredux-persist/AsyncStorageにメイン/インデックスコンポーネントの設定の保存方法で自動的に状態

import { Provider } from 'react-redux'; 
import { persistStore, autoRehydrate } from 'redux-persist'; 

import { yourReducers } from './reducers'; 

const store = compose(
    autoRehydrate() 
)(createStore)(yourReducers); 

2）を保存し、アプリケーションのレンダリングの前にロードされる状態を待つ

export default class index extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { rehydrated: false }; 
    } 

    componentWillMount() { 
     persistStore(store, {storage: AsyncStorage},() => { 
     this.setState({rehydrated: true}); 
     }); 
    } 

    render() { 
    if(!this.state.rehydrated) 
     return <View />; 
    else 
     return (
      <Provider store={store}> 
       <YourLoginScreen-or-Router /> 
      </Provider> 
     );} 
} 

3）これにより、LoginScreenが状態にアクセスし、状態がユーザーを含む場合は次の画面にユーザーを送信できます。これを行うにはルータを使用することをお勧めします。

import { Actions } from 'react-native-router-flux'; 
import { connect } from 'react-redux'; 

class LoginScreen extends Component { 
    ... 

    componentWillMount() { 
     if (this.props.user !== null) 
      Actions.ShowScreenWhereUserIsLoggedIn(); //If you dont use react-native-router-flux change to your navigator 
    } 

    render() { 
     ....   
    } 
} 

const mapStateToProps = ({ auth }) => { 
    const { user } = auth; 

    return { user }; 
}; 

export default connect(
    mapStateToProps,{} 
)(LoginScreen); 

authはあなたがここにReduxの詳細を読むことができ、それがログインしているとき、あなたのuserを保存し、画面

を切り替えるために、ルータ/ナビゲータを呼び出しますログイン/セッション減速です：http://redux.js.org/docs/basics/