Video Course

Getting Started with React and Redux: Lesson 4 of 10

Getting our Characters

Up Next

Displaying Our Characters

Autoplaying in 7 seconds!

Cancel

Now that we have a store, we need to populate our state with the characters we are going to be working with. To do so, we need to create our first action creator. This action will fetch the characters from the SWAPI and then dispatch another action that will eventually set the characters in our state. Since we will be storing the characters in our state under characters, we will put the actions in a file at src/reducer/characters/actions.js.

import { API_URL } from '../../constants';

export const SET_CHARACTERS = 'SET_CHARACTERS';

export function getCharacters() {
  return dispatch =>
    fetch(`${API_URL}/people`)
      .then(res => res.json())
      .then(res => res.results)
      .then(characters =>
        dispatch(setCharacters(characters))
      );
}

We are importing the API_URL from a constants.js file that we will make in a minute. We then export a constant that can be used by our reducer. Lastly, we export an action called getCharacters. This function returns another function. The is what redux-thunk does for us. If we return a function, it passes the dispatch function to our function. This means we can do something asynchronous, such as sending a request to an API and waiting for a response. In our function, we use the fetch API to send to get all the characters from the SWAPI. Once it comes back, we get pull the results out of the body and dispatch another action. Let's make that action creator. Add another function to this file.

export function setCharacters(characters) {
  return {
    type: SET_CHARACTERS,
    characters,
  };
}

This is a vrey simple action creator. We return an object that represents our action. Actions are just objects with a type and then whatever other data the reducers will need when they see this action. This action just needs to pass on the characters. Quickly, let's create the file that houses our API_URL. Put the following in a file at src/constants.js.

export const API_URL = 'http://swapi.co/api';

Now that we are getting the characters and are dispatching an action to set them, we need a reducer that will take that action and set the characters in our state. We will create this reducer at src/reducer/characters/index.js.

import { SET_CHARACTERS } from './actions';

const initialState = [];

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_CHARACTERS:
      return action.characters;
    default:
      return state;
  }
};

We import our action constant from our actions file. We setup a variable to hold out initial value of this part of state. This is important because when our application initializes, it runs all reducers. We need to make sure that there is a default state for all reducers so that it can initialize our state correctly. We export a function that takes the state and the action that was dispatched. The switch statement compares the action's type to each of our cases. Notice our default case just returns the state. This is important since we don't listen for all actions; only the ones we care about. When we see the SET_CHARACTERS action, we return the characters that are kept in the action.

We need to add our characters reducer to our root reducer. src/reducer/index.js should look like this now.

import { combineReducers } from 'redux';
import characters from './characters';

export default combineReducers({
  characters,
});

If we were to look at our work in the browser, bring up the developer tools, and look at the redux developer tools, we will see that our action isn't being fired off. Well, that's because we never actually dispatched it! Add the following lines to the app.js file.

import { getCharacters } from './reducer/characters/actions';

store.dispatch(getCharacters());

Now if we reload the page and look at the redux dev tools, we can see our actions are being fired off and our characters have been populated in state.

This is all well and good, but we aren't seeing anything. In the next one, we will get the characters out of state and display them on the page.

Chris Sevilleja

161 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.