Add async action to get the movies

src/public/js/actions/actionCreators.js

@@ -9,14 +9,6 @@ export function selectMovie(index) {
   }
 }
 
-export const ADD_MOVIES = 'ADD_MOVIES'
-export function addMovies(movies) {
-  return {
-    type: ADD_MOVIES,
-    movies
-  }
-}
-
 export const IS_USER_LOGGED_IN = 'IS_USER_LOGGED_IN'
 export function isUserLoggedIn() {
   return {
@@ -80,3 +72,35 @@ export function loginUser(username, password) {
     })
   }
 }
+
+export const MOVIE_LIST_FETCH_FULFILLED = 'MOVIE_LIST_FETCH_FULFILLED',
+             MOVIE_LIST_FETCH_PENDING = 'MOVIE_LIST_FETCH_PENDING';
+export function fetchMovies() {
+  const token = localStorage.getItem('token');
+  const header = 'Bearer ' + token;
+  return function(dispatch) {
+    dispatch({
+      type: MOVIE_LIST_FETCH_PENDING,
+    })
+    axios.get('/movies/explore/popular', {
+      headers: { 'Authorization': header },
+    })
+    .then(response => {
+      if (response.data && response.data.type && response.data.type === 'error')
+      {
+        dispatch({
+          type: ADD_ERROR,
+          payload: {
+            message: response.data.message,
+          }
+        })
+      }
+      dispatch({
+        type: MOVIE_LIST_FETCH_FULFILLED,
+        payload: response,
+      })
+    }).catch(error => {
+      console.log(error)
+    })
+  }
+}

src/public/js/components/movie-list.jsx

@@ -56,14 +56,8 @@ function MovieDetails(props) {
 }
 
 export default class MovieList extends React.Component {
-  componentDidMount() {
+  componentWillMount() {
-    var _this = this;
+    this.props.fetchMovies();
-    this.serverRequest =
-      axios
-      .get("/movies/explore/popular")
-      .then(function(result) {
-        _this.props.addMovies(result.data.Data.movies)
-      })
   }
   render() {
     const movies = this.props.movieStore.movies;

src/public/js/reducers/movie-store.js

@@ -1,4 +1,4 @@
-import { ADD_MOVIES, SELECT_MOVIE } from '../actions/actionCreators'
+import { SELECT_MOVIE, MOVIE_LIST_FETCH_FULFILLED, MOVIE_LIST_FETCH_PENDING } from '../actions/actionCreators'
 
 const defaultState = {
   movies: [],
@@ -7,10 +7,12 @@ const defaultState = {
 
 export default function movieStore(state = defaultState, action) {
   switch (action.type) {
-    case ADD_MOVIES:
+    case MOVIE_LIST_FETCH_FULFILLED:
       return Object.assign({}, state, {
-        movies: action.movies,
+        movies: action.payload.data.Data.movies,
       })
+    case MOVIE_LIST_FETCH_PENDING:
+      return state
     case SELECT_MOVIE:
       return Object.assign({}, state, {
         selectedMovieIndex: action.index,