feat(*): remove movie's filter logic from RmRoot

create RmMovieDetails's actions and reducer

src/actions/index.js

@@ -51,6 +51,32 @@ export function getMovies(url) {
 
 }
 
+/**
+ *
+ * @param {Object} movie
+ * @return {Object.<Action>}
+ */
+export const setMovie = makeActionCreator(types.SET_MOVIE, 'movie');
+
+/**
+ *
+ * @param {String} id
+ * @return {Function} function
+ */
+export function getMovie(id) {
+
+  return function (dispatch, getState) {
+
+    const movies = getState().movies;
+
+    const movie = movies.filter(m => m.id === +id)[0];
+
+    dispatch(setMovie(movie));
+
+  };
+
+}
+
 /**
  *
  * @param {Array.<Object>} countries

src/components/RmRoot/RmRoot.jsx

@@ -22,11 +22,7 @@ const RmRoot = ({ store }) => (
           />
           <Route
             path="/details/:id"
-            component={props => {
-              const { match: { params } } = props;
-              const movie = movies.filter(({ id }) => +params.id === id)[0];
-              return <RmMovieDetails movie={movie} {...props} />;
-            }}
+            component={props => <RmMovieDetails {...props} /> }
           />
         </div>
         <RmFooter />

src/constants/ActionTypes.js

@@ -5,5 +5,7 @@ export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const SET_SELECTED_COUNTRY = 'SET_SELECTED_COUNTRY';
 export const SET_COUNTRIES = 'SET_COUNTRIES';
 export const GET_COUNTRIES = 'GET_COUNTRIES';
+export const GET_MOVIE = 'GET_MOVIE';
+export const SET_MOVIE = 'SET_MOVIE';
 export const GET_MOVIES = 'GET_MOVIES';
 export const SET_MOVIES = 'SET_MOVIES';

src/containers/RmMovieDetails/RmMovieDetails.jsx

@@ -1,16 +1,25 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { getMovie } from '../../actions';
 
 import Header from '../../components/RmHeader/RmHeader';
 import RmMovie from '../../components/RmMovie/RmMovie';
 
-export default class RmMovieDetails extends Component {
+class RmMovieDetails extends Component {
 
   constructor() {
     super();
   }
 
+  componentWillMount() {
+    this.props.dispatch(getMovie('1'));
+  }
+
   render() {
+
     const { movie } = this.props;
+
     return (
       <div>
         <Header />
@@ -19,6 +28,13 @@ export default class RmMovieDetails extends Component {
         </div>
       </div>
     );
+
   }
 
-}
+}
+
+const mapStateToProps = (state) => ({
+  movie: state.movie
+});
+
+export default connect(mapStateToProps)(RmMovieDetails);

src/reducers/index.js

@@ -3,12 +3,14 @@
  */
 
 import { combineReducers } from 'redux';
+import movie from './movie';
 import movies from './movies';
 import searchTerm from './searchTerm';
 import selectedCountry from './selectedCountry';
 import countries from './countries';
 
 export default combineReducers({
+  movie,
   movies,
   searchTerm,
   selectedCountry,

src/reducers/movie.js

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