react-redux login-example github

Example 1: react-native-redux login example github

{
  type: <name of action defined in constants.js>,
  payload: <the actual payload -- it's optional>
}

Example 2: react-native-redux login example github

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import GitAccount from './GitAccount';
import { accountReducer, initialState } from './reducer';

console.log(`${Date()} 1111111111>>> initialization of Redux for the application.`);
const rootReducer = accountReducer;
const middlewares = [thunk];
const store = createStore(rootReducer, initialState, applyMiddleware(...middlewares));

export default class App extends Component {
  render() {
    console.log(`${Date()} 2222222222>>> Provider is a wrapper to the application and responsible for providing access to the created store`);
    return (
      <Provider store={store}>
        <View style={styles.container}>
          <GitAccount />
        </View>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 50
  }
});

Example 3: react-native-redux login example github

import { FETCH_ACCOUNT_ERROR, FETCH_ACCOUNT_LOADING, FETCH_ACCOUNT_SUCCESS } from './actions';

export const initialState = {
    loading: false,
    account: [],
    error: null
}

function selectInterestedAccountInfo(account) {
    return Object.keys(account).reduce(function(obj, k) {
        if (["login", "url", "name", "created_at", "bio", "email", "public_repos"].includes(k)) {
            obj[k] = account[k];
        }
        return obj;
      }, {});
}

export function accountReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_ACCOUNT_LOADING:
            return {
                ...state,
                loading: true
            }
        case FETCH_ACCOUNT_SUCCESS:
            return {
                ...state,
                loading: false,
                account: selectInterestedAccountInfo(action.payload)
            }
        case FETCH_ACCOUNT_ERROR:
            return {
                ...state,
                loading: false,
                error: action.error
            }
        default:
            return state;
    }
}

export const getAccountSuccess = state => state.account;
export const getAccountLoading = state => state.loading;
export const getAccountError = state => state.error;