DEV Community: Shobhit Kumar

Guess the Subreddit - Reddit Quiz Game ⚡ A new way to browse Reddit

Shobhit Kumar — Mon, 07 Sep 2020 13:11:48 +0000

This is my second Android app made using React Native. It was a fun experience and I got to learn a lot.

Saw that meme this morning, yeah? Or that cute puppy video, you liked it... but do you remember which subreddit it is from?
And there's so many related subreddits that you don't know of which have better content! What if there was a not-so-boring way to get to all this...

Well, here's a gamified Reddit experience!

Download here: https://play.google.com/store/apps/details?id=com.supervoid.guessthesubreddit

Click here for screenshots

Please download and rate/review on Playstore. Share with your friends too!

Would love to hear back from the community on any feedback 😃

Here are some of the features:

✔ A fresh way to browse Reddit content in the form of a quiz
✔ Challenge your brain to test knowledge of various subreddits & earn points
✔ Multiple game modes so that you are never bored
✔ See your game stats and share with your friends
✔ Explore many more new categories and subreddits!
✔ Non-intrusive ads that don't hamper your user experience
✔ Minimalist UI with beautiful colors

How to save login state locally using AsyncStorage & Redux in React Native

Shobhit Kumar — Sun, 21 Jun 2020 08:08:18 +0000

In the last post (here: https://dev.to/skd1993/creating-a-simple-login-function-with-redux-and-thunk-in-react-native-33ib) I discussed the steps to create a simple login logic using Redux and Thunk in React Native.

Continuing from there, in this post, we will look at how can the login state be saved locally in the app. The same logic can be extended to other functions as well (and not just limited to login).

Why save locally?

You may not want you app's user to login everytime on launching the app. That would be cumbersome. There should be some mechanism to "remember" their situation (logged in : true or false).

Depending on what the status is you can choose to show some app screens (like profile page, content page) and skip others (like login page, sign up page).

What about Redux?

Redux can only maintain the state till the app in "on". If the user exits the app, or say for example, reboots the phone or the app crashes the state resets.

How can we do it?

Simply by maintaining a copy of your redux state locally on the device. We can AsyncStorage library to achieve this. It will allow us to store JSON object in local storage.

Let's have a look at the steps now.

Install the `AsyncStorage` library

Go in your project directory (where your package.json exists) and:

For npm users run npm i @react-native-community/async-storage
For yarn users run yarn add @react-native-community/async-storage

Post installation, if you use React Native version <= 0.59 the you also need to link it by running: react-native link @react-native-community/async-storage

Reminder on Redux...

As discussed in the previous post, for sake of simplicity, all redux code is placed in a 'redux' folder, while the components are in 'src/components/< ComponentName >/index.js'.

This is how our redux folder looks like.

redux
├── actions.js
├── actionTypes.js
├── initialState.js
├── reducer.js
└── store.js

We currently have the following login function to call the login API, and get back the data (in actions.js)

import { Alert } from 'react-native'; // to show alerts in app

export const login = (loginInput) => {
  const { username, password } = loginInput;
  return (dispatch) => {  // don't forget to use dispatch here!
    return fetch(LoginUrl, {
      method: 'POST',
      headers: {  // these could be different for your API call
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(loginInput),
    })
      .then((response) => response.json())
      .then((json) => {
        if (json.msg === 'success') { // response success checking logic could differ
          dispatch(setLoginState({ ...json, userId: username })); // our action is called here
        } else {
          Alert.alert('Login Failed', 'Username or Password is incorrect');
        }
      })
      .catch((err) => {
        Alert.alert('Login Failed', 'Some error occured, please retry');
        console.log(err);
      });
  };
};

To start using AsyncStorage let's import it first:

import AsyncStorage from '@react-native-community/async-storage';

The let us tweak the response part a bit to simplify:

if (json.msg === 'success') { // response success checking logic could differ
  const o = { ...json, userId: username };
  setLoginLocal(o); // storing in local storage for next launch
  dispatch(setLoginState(o)); // our action is called here
}

As you can see, now setLoginLocal function will take the data and be responsible for local storage. Same data is passed in the next line to our action dispatcher.

Let's create the setLoginLocal function now in the same file.

const setLoginLocal = async (loginData) => {
  try {
    await AsyncStorage.setItem('loginData', JSON.stringify(loginData));
  } catch (err) {
    console.log(err);
  }
};

NOTE: AsyncStorage can only store string data, so in order to store object data you need to serialize it first. For data that can be serialized to JSON you can use JSON.stringify() when saving the data and JSON.parse() when loading the data.

setItem() is used both to add new data item (when no data for given key exists), and to modify exiting item (when previous data for given key exists).

And that's it! Simple and easy to understand. The login state object will now be stored locally on the device, and will persist even after app is closed / device reboots. It's just like an app-specific DB.

You can read more about the library here:

In the coming posts, we will look at how to utilize this local state while loading the app on launch.

Hope this was helpful 😄

Creating a simple Login function with Redux and Thunk in React Native

Shobhit Kumar — Mon, 13 Apr 2020 07:26:44 +0000

This is my first post here :)

In this post, we will see how an action can be dispatched using Redux on login, and set the app state accordingly.

Assuming familiarity with React Native and Redux concepts

We have the following Login component to begin with :

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';

import CustomButton from '../../components/CustomButton';
import InputField from '../../components/InputField';

import { styles } from './style';

const Login = (props) => {

  // remove these initial assignments after testing
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View>
      <InputField
        placeholder='Enter username'
        value={username}
        onChangeText={(text) => setUsername(text)}
      />
      <InputField
        placeholder='Enter password'
        secureTextEntry={true}
        value={password}
        onChangeText={(text) => setPassword(text)}
      />
      <CustomButton 
        title='Sign In' 
        onPress={() => }  
      />
  );
};

export default Login;

Right now it doesn't do anything, it's just barebones UI.

To make it "react" to user action we should update the onPress paramter in the SignIn button.

<CustomButton title='Sign In' onPress={() => } />

We use redux here, so pressing the button should dispatch and action to the reducer which should in turn update the overall app's state.

For sake of simplicity, all redux code is placed in a 'redux' folder, while the components are in 'src/components/< ComponentName >/index.js'.

This is how our redux folder looks like.
redux
├── actions.js
├── actionTypes.js
├── initialState.js
├── reducer.js
└── store.js

Let's set initialState as follows. These are all the fields that our login API will return (yours may differ).
userId and isLogged in are flags that we will set on our own (these are not part of API response)

export const initialState = {
  isLoggedIn: false,
  userId: '',
  token: '',
  refreshToken: '',
  expiresOn: '',
  data: '',
};

Define action type in actionTypes.js

export const SET_LOGIN_STATE = "SET_LOGIN_STATE"

Let's now create our loginReducer in reducer.js

import { initialState } from './initialState';
import * as t from './actionTypes';

export const loginReducer = (state = initialState, action) => {
  switch (action.type) {
    case t.SET_LOGIN_STATE:
      return {
        ...state,
        ...action.payload, // this is what we expect to get back from API call and login page input
        isLoggedIn: true, // we set this as true on login
      };
    default:
      return state;
  }
};

We can now generate our redux store using all the available information and thunk as middleware to handle API calls.

import thunkMiddleware from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'; // this is for debugging with React-Native-Debugger, you may leave it out
import { loginReducer } from './reducer';

const rootReducer = combineReducers({
  loginReducer: loginReducer,
});

export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunkMiddleware))
);

We have these things in place but we still have not figured how to set the state from the Login component. For this we need to define some actions in actions.js

What we are looking at is a function that can call the login API and return the result back to us.

Something like :

return fetch(LoginUrl, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(loginInput),
    })
    .then()
...................

But we also need to ensure that the action is "connected" to the "reducer" in order to update the redux state or store.

Since API call is considered unpredictable, it should not dispatch the action object directly to reducer, but through a helper.

Dispatching action can return only an Object. If it returns a promise the app will break. We need to make sure of this.

In actions.js :

import * as t from './actionTypes';
import { LoginUrl } from '../constants/Api';

// this is what our action should look like which dispatches the "payload" to reducer
const setLoginState = (loginData) => {
  return {
    type: t.SET_LOGIN_STATE,
    payload: loginData,
  };
};

To fetch this loginData in the action above, we create another function using the fetch operation discussed above:

import { Alert } from 'react-native'; // to show alerts in app

export const login = (loginInput) => {
  const { username, password } = loginInput;
  return (dispatch) => {  // don't forget to use dispatch here!
    return fetch(LoginUrl, {
      method: 'POST',
      headers: {  // these could be different for your API call
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(loginInput),
    })
      .then((response) => response.json())
      .then((json) => {
        if (json.msg === 'success') { // response success checking logic could differ
          dispatch(setLoginState({ ...json, userId: username })); // our action is called here
        } else {
          Alert.alert('Login Failed', 'Username or Password is incorrect');
        }
      })
      .catch((err) => {
        Alert.alert('Login Failed', 'Some error occured, please retry');
        console.log(err);
      });
  };
};

You can see how our action is dispatched from this function, which in turn will return a payload object to the reducer in order to perform state update.

Only thing remaining now is connecting this function to the UI. Let's go back to our Login component in the Submit button section and specify onPress

import { useDispatch } from 'react-redux';
import { login } from '../../redux/actions';

...............

<CustomButton 
        title='Sign In' 
        onPress={() => useDispatch(login({'username': username, 'password': password }))}  
      />
...............

Since we are using redux here, all our functions should ideally be in form of some action, which will be caught in the redux-thunk middleware first and then passed on appropriately to reducer.

On successful login, the initialState values will all be populated. On failure, an alert will show up stating error.