feat(*): handle async actions with 'redux-thunk'

add 'movies' reducer and get the movies asynchronously

package.json

@@ -108,6 +108,7 @@
     "react-redux": "5.0.6",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
-    "redux": "3.7.2"
+    "redux": "3.7.2",
+    "redux-thunk": "2.2.0"
   }
 }

src/actions/index.js

@@ -30,9 +30,32 @@ export function setSelectedCountry(selectedCountry) {
 }
 
 
-export function setCountries(countries) {
+export function setMovies(movies) {
   return {
-    type: types.SET_COUNTRIES,
-    countries
+    type: types.SET_MOVIES,
+    movies
   };
 }
+
+/**
+ *
+ * @param {String} url
+ * @return {Object.<Action>} action
+ */
+export function getMovies(url) {
+  /**
+   * 'dispatch' is the same one that we use to dispatch actions to Redux
+   *
+   * 'getState' is a function that if you need to do something based on
+   * the Redux store's data, you can call it to get the current state.
+   */
+  return async function (dispatch, getState) {
+    try {
+      const { data } = await api.get(url);
+      dispatch(setMovies(data));
+    } catch (err) {
+      throw new Error('ReactMovies: ', err);
+    }
+  };
+
+}

src/constants/ActionTypes.js

@@ -3,5 +3,6 @@
  */
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const SET_SELECTED_COUNTRY = 'SET_SELECTED_COUNTRY';
-export const SET_COUNTRIES = 'GET_COUNTRIES';
-export const GET_MOVIES = 'GET_MOVIES';
+export const GET_COUNTRIES = 'GET_COUNTRIES';
+export const GET_MOVIES = 'GET_MOVIES';
+export const SET_MOVIES = 'SET_MOVIES';

src/containers/RmMovies/RmMovies.jsx

@@ -2,10 +2,9 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { arrayOf, shape, string, number } from 'prop-types';
 
-import { setSearchTerm } from '../../actions';
+import { setSearchTerm, getMovies } from '../../actions';
 import RmHeader from 'Components/RmHeader/RmHeader';
 import MovieCard from 'Components/RmMovieCard/RmMovieCard';
-import api from 'api';
 
 class RmMovies extends Component {
 
@@ -24,20 +23,17 @@ class RmMovies extends Component {
    * @async
    * @return {Promise<void>}
    */
-  async componentWillMount() {
-    try {
-      const { data } = await api.get(`../../assets/json/movies.json`);
-      this.setState({movies: data});
-    } catch (err) {
-      throw new Error('ReactMovies: ', err);
+  componentWillMount() {
+
+    if (!this.props.movies.length) {
+      this.props.dispatch(getMovies(`../../assets/json/movies.json`));
     }
+
   }
 
   render() {
 
-    const { searchTerm } = this.props;
-
-    const { movies } = this.state;
+    const { searchTerm, movies } = this.props;
 
     return (
       <section>
@@ -87,7 +83,8 @@ class RmMovies extends Component {
 };*/
 
 const mapStateToProps = (state) => ({
-  searchTerm: state.searchTerm
+  searchTerm: state.searchTerm,
+  movies: state.movies
 });
 
 export default connect(mapStateToProps)(RmMovies);

src/reducers/index.js

@@ -5,8 +5,10 @@
 import { combineReducers } from 'redux';
 import searchTerm from './searchTerm';
 import selectedCountry from './selectedCountry';
+import movies from './movies';
 
 export default combineReducers({
   searchTerm,
-  selectedCountry
+  selectedCountry,
+  movies
 });

src/reducers/movies.js

@@ -0,0 +1,24 @@
+/**
+ * @module reducers/movies
+ */
+
+import { SET_MOVIES }  from '../constants/ActionTypes';
+
+/**
+ *
+ * @param state
+ * @param action
+ * @return {*}
+ */
+export default function movies(state = [], action) {
+  switch (action.type) {
+
+    case SET_MOVIES:
+
+      return action.movies;
+
+    default:
+      return state;
+  }
+
+}

src/store.js

@@ -1,5 +1,6 @@
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
 
 import reducer from './reducers';
 
-export default createStore(reducer);
+export default createStore(reducer, applyMiddleware(thunk));

yarn.lock

@@ -865,7 +865,7 @@ [email protected], babel-plugin-transform-regenerator@^6
   dependencies:
     regenerator-transform "^0.10.0"
 
-babel-plugin-transform-runtime@^6.23.0:
+[email protected]:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-runtime/-/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
   dependencies:
@@ -1805,7 +1805,7 @@ copy-props@^1.4.1:
     each-props "^1.2.1"
     is-plain-object "^2.0.1"
 
-copy-webpack-plugin@^4.3.1:
+[email protected]:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.3.1.tgz#19ba6370bf6f8e263cbd66185a2b79f2321a9302"
   dependencies:
@@ -6941,6 +6941,10 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-thunk@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.2.0.tgz#e615a16e16b47a19a515766133d1e3e99b7852e5"
+
 [email protected]:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"