Create a Contact Manager app

In this tutorial, we're going to create a contact management app, much like the React Native version that's already been created.

We'll start by fleshing out the application state.

Determining Application State structure

Our app is fairly straightforward: we're only going to have two pieces of state, contacts and contactForm. The contacts piece of state will contain the contact list and whether it's loading the list or not, while contactForm will contain the form data that will be submitted by the user.

The app state will look more or less like this:

{
  contacts: {
    contactList: [],
    loading: false
  }
}

Redux

Since we're using Redux to manage app state, we will only have one 'global' state, shared by the components connected to Redux.

To use Redux in our app, we will need 3 libraries for starters: redux, react-redux and redux-form to handle form state.

yarn add redux react-redux redux-form

Reducers

Reducers, in Redux, are functions responsible for modifying the application state. They receive the current state object and an action object that represents how the state should change, then return a new state reflecting those changes, instead of mutating the state outright.

Actions

Actions, in Redux, are plain, common JavaScript options that, by definition, take a type that's a string and, optionally, a payload that can be named at the discretion of the developer.

All actions in the application must have unique names, even though there's more than one reducer.

Example of an action

{
  type: 'ACTION_TYPE',
  payload: 'value'
}

In our app, we will have 2 reducers: one that will manage the contacts piece of state, called contactsReducer, and another that's already supplied by redux-form that creates the form piece of state for us so we don't need to implement it.

Creating our reducer

mkdir src/reducers
nano src/reducers/contactsReducer.js

The reducer will contain a constant that's the initial state of the app, as described above, and a function that will be responsible for returning new states based on actions passed to it.

Our final file will look like this:

const initialState = {
  contactList: [],
  loading: false
}

export const contactsReducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
}

Combining our reducers

In the beginning of the guide, we said the application would have a global state, yet we have 2 reducers (contactsReducer and a formReducer we'll import from redux-form), each with a different piece of state.

In order to create one state out of these 2 reducers, we'll need to combine the reducers using a function from the redux library called combineReducers.

combineReducers will return an object containing the states returned by the reducers passed to it.

nano src/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { contactsReducer } from './contactsReducer';

export default combineReducers({
  contacts: contactsReducer,
  form: formReducer
});

If we call the function returned by the combineReducers call we created, we would have the same object shown at the beginning of the guide.

Let's commit our changes and head to the next step.

git add .
git commit -m "Add Redux libraries and create reducers"

Next step: Set up Application Store