React Native + Redux Notes

reactredux.md

React + Redux

Installing redux

• npm install --save redux react-redux

Redux BoilerPlate

1. Store will hold the entire app's state
2. Provider will translate the state in the store to be consumed by the app
3. Providers can only have 1 child element at a time.

import React, { Component } from 'react';
import {
  View
} from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './src/reducers';

export default class App extends Component<{}> {
  render() {
    return (
      <Provider store={createStore}>
        <View />
      </Provider>
    );
  }
}

Reducer BoilerPlate

export default (state = null, action) => {
  switch (action.type) {
    case 'nameOfType':
      return action.paylod
    default: 
      return state
  }
};

In a separate file , create a file that holds all the reducers

import { combineReducers } from 'redux';

export default combineReducers({
    libraries: () => []
});

Store

• An object that holds the app's data
• When creating a store , redux expects to consume a reducer

Action

• An object that tells the reducer how to change its data

const action = {
  // action you want to do
  type: 'split_string',
  // the data you want to use
  payload: 'hehe'
}

Action Creators

• Literally as the name mean, a javascript function that creates the action
• The action creator creates the action of selecting a library.

export const selectLibrary = (libraryId) => {
  return {
    type: 'select_library',
    payload: libraryId
  };
};

• After creating the action creator, determine where you'd like the action to be executed(where the state will be updated)
• export default connect(null, actions)(ListItem);
• This would pass the actions to the component ListItem as props

Redux - Thunk

Asynchronous Action Creators

• When handling data fetching/ HTTP requests, our action creators need to be asynchronous
• Install redux thunk npm install --save redux-thunk
• Action creators will now be called with dispatch

Redux-Thunk wiring up

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import LoginForm from './src/components/LoginForm';


export default class App extends Component<{}> {

  render() {
    const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
    return (
      <Provider store={store}>
        <LoginForm />
      </Provider>
    );
  }
}

Redux-Think in action with firebase requests

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => {
        dispatch({ type: 'LOGIN_USER_SUCCESS', payload: user});
      });
  };
};

Reducer

• A function that returns some data
• do not mutate state in the reducer, always return a brand new object in your reducers
• Reducers are initiated the second the app is opened and it MUST NOT BE UNDEFINED , it can be null though

State

• Data for our app to use

Accessing state in Redux

• Connect helper to access state

connect helper example

import React, { Component } from 'react';
import { connect } from 'react-redux';

class LibraryList extends Component {
  render() {
    console.log(this.props);
    return;
  }
}

// ownProps === this.props
const mapStateToProps = (state, ownProps) => {
  return { libraries: state.libraries };
};


export default connect(mapStateToProps)(LibraryList);

1. The connect helper establishes a connection between the LibraryList data object and the app
2. connect(arg1, arg2) takes 2 agruments and the first agrument must be mapStateToProps, if you do not want to map state to props then pass in null. arg2 will be actions and is not required
3. The function mapStateToProps then makes a reuqest to the provider for the state of libraries and returns the state to the LibraryList component.

List View

• import { ListView } from 'react-native'; to get started
• List view addresses performance issues, rendering components dynamically by listening to events such as scrollviews