title: How to use React Native AsyncStorage with Redux?
body: <p>I have made login and logout actions and userReducer. How can I integrate AsyncStorage with Redux? I am using Redux Thunk as a middleware. </p>
  
  <p>I am able to implement login and logout using internal state variable but I am not able to understand how to break it down into action and reducer as well as make use of AsyncStorage for storing <code>accessToken</code>.</p>
  
  <p>Original Code:</p>
  
  <pre><code>_onLogin = () =&gt; {
      auth0.webAuth
        .authorize({
          scope: 'openid profile',
          audience: 'https://' + credentials.domain + '/userinfo'
        })
        .then(credentials =&gt; {
          this.setState({ accessToken: credentials.accessToken });
        })
        .catch(error =&gt; console.log(error));
    };
  
    _onLogout = () =&gt; {
      if (Platform.OS === 'android') {
        this.setState({ accessToken: null });
      } else {
        auth0.webAuth
          .clearSession({})
          .then(success =&gt; {
            this.setState({ accessToken: null });
          })
          .catch(error =&gt; console.log(error));
      }
    };
  </code></pre>
  
  <p>loginAction.js:</p>
  
  <pre><code>   import { LOGIN_USER } from './types';
  import Auth0 from 'react-native-auth0';
  
  var credentials = require('./auth0-credentials');
  const auth0 = new Auth0(credentials);
  
  export const loginUser = () =&gt; dispatch =&gt; {
      auth0.webAuth
      .authorize({
        scope: 'openid profile',
        audience: 'https://' + credentials.domain + '/userinfo'
      })
      .then(credentials =&gt;
          dispatch({
              type: LOGIN_USER,
              payload: credentials.accessToken
          })
      )
      .catch(error =&gt; console.log(error));
  }
  </code></pre>
  
  <p>logoutAction.js:</p>
  
  <pre><code>       import { LOGOUT_USER } from './types';
  import Auth0 from 'react-native-auth0';
  
  var credentials = require('./auth0-credentials');
  const auth0 = new Auth0(credentials);
  
  export const logoutUser = () =&gt; dispatch =&gt; {
  
          auth0.webAuth
            .clearSession({})
            .then(success =&gt; 
                  dispatch({
                      type: LOGOUT_USER,
                      payload: null
                  })
            )
            .catch(error =&gt; console.log(error));
  }
  </code></pre>
  
  <p>userReducer.js:</p>
  
  <pre><code>  import { LOGIN_USER, LOGOUT_USER } from '../actions/types';
  
  const initialState = {
      accessToken: null
  }
  
  export default function (state = initialState, action) {
      switch (action.type) {
  
          case LOGIN_USER:
  
              _storeData = async () =&gt; {
                  try {
                      await AsyncStorage.setItem('accessToken', action.payload);
                  } catch (error) {
                      console.log(error)
                  }
              }
  
              return {
                 ...state,
                 accessToken:action.payload
              };
  
          case LOGOUT_USER:
  
              _removeData = async (accessToken) =&gt; {
                  try {
                      await AsyncStorage.removeItem(accessToken);
                  } catch (error) {
                      console.log(error)
                  }
              }    
  
              return {
                  ...state,
                  accessToken:action.payload
              };
  
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>I am new to Redux so I tried converting original code into actions and reducers but I am not sure whether I have implemented AsyncStorage in <code>userReducer.js</code> correctly?</p>