Permalink
Browse files

Step 8: Set up configureStore, rootReducer, and hard-coded GifsReducer

  • Loading branch information...
samanthamichele7 committed May 31, 2017
1 parent 9783326 commit 391dcb32a2d7ffb37a9fdeb82c4704ddfc94f188
Showing with 56 additions and 54 deletions.
  1. +12 −54 src/index.js
  2. +16 −0 src/reducers/gifs.js
  3. +8 −0 src/reducers/index.js
  4. +20 −0 src/store/configureStore.js
@@ -1,56 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import GifList from './components/GifList';
import GifModal from './components/GifModal';
import SearchBar from './components/SearchBar';
import request from 'superagent';
import './styles/app.css';

class App extends React.Component {
constructor() {
super();

this.state = {
gifs: [],
selectedGif: null,
modalIsOpen: false
};
}

openModal(gif) {
this.setState({
modalIsOpen: true,
selectedGif: gif
});
}

closeModal() {
this.setState({
modalIsOpen: false,
selectedGif: null
});
}

handleTermChange(term) {
const url = `http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=dc6zaTOxFJmzC`;

request.get(url, (err, res) => {
this.setState({ gifs: res.body.data })
});
}

render() {
return (
<div>
<SearchBar onTermChange={term => this.handleTermChange(term)}/>
<GifList gifs={this.state.gifs}
onGifSelect={selectedGif => this.openModal(selectedGif) } />
<GifModal modalIsOpen={this.state.modalIsOpen}
selectedGif={this.state.selectedGif}
onRequestClose={ () => this.closeModal() } />
</div>
);
}
}

ReactDOM.render(<App />, document.getElementById('app'));
import App from './containers/App';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

const store = configureStore();

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
@@ -0,0 +1,16 @@
export default function() {
return [
{
id: 1,
url: 'http://fakeimg.pl/300/'
},
{
id: 2,
url: 'http://fakeimg.pl/300/'
},
{
id: 3,
url: 'http://fakeimg.pl/300/'
}
];
}
@@ -0,0 +1,8 @@
import { combineReducers } from 'redux';
import GifsReducer from './gifs';

const rootReducer = combineReducers({
gifs: GifsReducer
});

export default rootReducer;
@@ -0,0 +1,20 @@
import { createStore } from 'redux';
import rootReducer from '../reducers';

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

if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}

return store;
}

0 comments on commit 391dcb3

Please sign in to comment.