Permalink
Browse files

Step 10: Add first action creator to handle async superagent requests

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent 28bf12f commit bd88a3d07ddfb2049558b16c56b67618c4a5f77c
Showing with 34 additions and 11 deletions.
  1. +1 −0 package.json
  2. +15 −0 src/actions/index.js
  3. +0 −6 src/components/SearchBar.js
  4. +12 −3 src/containers/App.js
  5. +6 −2 src/store/configureStore.js
@@ -8,6 +8,7 @@
"react-modal": "^1.7.7",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-promise": "^0.5.3",
"superagent": "^3.5.2"
},
"devDependencies": {
@@ -0,0 +1,15 @@
import request from 'superagent';

export const REQUEST_GIFS = 'REQUEST_GIFS';

const API_URL = 'http://api.giphy.com/v1/gifs/search?q=';
const API_KEY = '&api_key=dc6zaTOxFJmzC';

export function requestGifs(term = null) {
const data = request.get(`${API_URL}${term.replace(/\s/g, '+')}${API_KEY}`);

return {
type: REQUEST_GIFS,
payload: data
}
}
@@ -1,13 +1,7 @@
import React from 'react';

class SearchBar extends React.Component {
constructor() {
super();
this.state = { term: '' }
}

onInputChange(term) {
this.setState({term});
this.props.onTermChange(term);
}

@@ -1,12 +1,15 @@
import React from 'react';
import GifsTemp from '../components/GifsTemp';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as Actions from '../actions';
import SearchBar from '../components/SearchBar';
import '../styles/app.css';

class App extends React.Component {
render() {
return (
<div>
<GifsTemp gifs={ this.props.gifs } />
<SearchBar onTermChange={this.props.actions.requestGifs} />
</div>
);
}
@@ -18,4 +21,10 @@ function mapStateToProps(state) {
};
}

export default connect(mapStateToProps)(App);
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Actions, dispatch)
};
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
@@ -1,11 +1,15 @@
import { createStore } from 'redux';
import { createStore, compose, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
window.devToolsExtension ? window.devToolsExtension() : undefined
compose (
applyMiddleware(ReduxPromise),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);

if (module.hot) {

0 comments on commit bd88a3d

Please sign in to comment.