diff --git a/package.json b/package.json index f5b1ee4b..14f022b0 100644 --- a/package.json +++ b/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" } } diff --git a/src/actions/index.js b/src/actions/index.js index 897cf52a..91fba78b 100644 --- a/src/actions/index.js +++ b/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 + */ +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); + } + }; + +} \ No newline at end of file diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index e7a114ea..3c4bfcbc 100644 --- a/src/constants/ActionTypes.js +++ b/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'; \ No newline at end of file +export const GET_COUNTRIES = 'GET_COUNTRIES'; +export const GET_MOVIES = 'GET_MOVIES'; +export const SET_MOVIES = 'SET_MOVIES'; \ No newline at end of file diff --git a/src/containers/RmMovies/RmMovies.jsx b/src/containers/RmMovies/RmMovies.jsx index bdf538af..8ff59319 100755 --- a/src/containers/RmMovies/RmMovies.jsx +++ b/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} */ - 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 (
@@ -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); \ No newline at end of file diff --git a/src/reducers/index.js b/src/reducers/index.js index 505a3e57..046dc777 100644 --- a/src/reducers/index.js +++ b/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 }); \ No newline at end of file diff --git a/src/reducers/movies.js b/src/reducers/movies.js new file mode 100644 index 00000000..14eb159a --- /dev/null +++ b/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; + } + +} \ No newline at end of file diff --git a/src/store.js b/src/store.js index 6d394576..fd27a0eb 100644 --- a/src/store.js +++ b/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); \ No newline at end of file +export default createStore(reducer, applyMiddleware(thunk)); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8ebb26cd..0aa6f042 100644 --- a/yarn.lock +++ b/yarn.lock @@ -865,7 +865,7 @@ babel-plugin-transform-regenerator@6.26.0, babel-plugin-transform-regenerator@^6 dependencies: regenerator-transform "^0.10.0" -babel-plugin-transform-runtime@^6.23.0: +babel-plugin-transform-runtime@6.23.0: 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: +copy-webpack-plugin@4.3.1: 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" + redux@3.7.2: version "3.7.2" resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"