React Series Challenge - Daniel #66
Conversation
src/components/Navigation/Navbar.js
Outdated
| const Navbar = ({ location }) => ( | ||
| <div> | ||
| <div> | ||
| <NavLink to="/">Home</NavLink> |
src/sagas/searchGifs.js
Outdated
| .get("http://api.giphy.com/v1/gifs/search", { | ||
| params: { | ||
| q: query, | ||
| api_key: "NYBl3G1fuM3PcJWfeAv0wSS6fuHAJhIK" |
There was a problem hiding this comment.
Use .env variables to save your api keys and do not expose them versioning them. You can provide an .env.example file expressing its usage.
| @@ -0,0 +1,35 @@ | |||
| import { injectGlobal } from "styled-components"; | |||
| right: 10px; | ||
| top: 15px; | ||
| background-color: transparent; | ||
| color: ${props => props.favorite ? "#00a2ff" : "#ccc" }; |
package.json
Outdated
| }, | ||
| "jest": { | ||
| "collectCoverageFrom": [ | ||
| "**/src/**/*.{js,jsx}", | ||
| "!**/src/registerServiceWorker.{js,jsx}" | ||
| "!**/src/registerServiceWorker.{js,jsx}", | ||
| "!**/node_modelus", |
| import { Container } from "./App.style"; | ||
| import NotFound from "./pages/NotFound"; | ||
|
|
||
| const Routes = () => { |
There was a problem hiding this comment.
In this specific exercise you may not see the value but you are declaring the routes in a semi static way on a separate file. Remember that one of the key takeaways of react router 4 is integrating the routes through the component views dynamically, as your application grows and become more complex maintaining this static definition of routes may not be the best approach
| const ADD_FAVORITE_GIF = "ADD_FAVORITE_GIF"; | ||
| const GET_FAVORITE_SEARCH_GIFS = "GET_FAVORITE_SEARCH_GIFS"; | ||
|
|
||
| export default { |
|
|
||
| const mapDispatchToProps = dispatch => { | ||
| return { | ||
| addFavoriteGif: gif => dispatch({ type: "ADD_FAVORITE_GIF", payload: gif }) |
There was a problem hiding this comment.
With creators you could have done something like:
const mapDispatchToProps = dispatch => bindActionCreators({
addFavoriteGif: creators.addFavoriteGif,
}, dispatch);or
const mapDispatchToProps = { addFavoriteGif: creators.addFavoriteGif };|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| null |
There was a problem hiding this comment.
If you are not using mapDispatchToProps, you can omit the second parameter of connect;
| const favoriteReducer = (state = initialState, action) => { | ||
| const { type, payload } = action; | ||
| switch (type) { | ||
| case favoriteGifsActions.types.ADD_FAVORITE_GIF: { |
There was a problem hiding this comment.
This reducer should have separate ADD_FAVORITE_GIF and REMOVE_FAVORITE_GIF.
| import { createStore, applyMiddleware, compose } from "redux"; | ||
| import createSagaMiddleware from "redux-saga"; | ||
| import reducers from "../reducers"; | ||
| import { persistStore, persistReducer } from "redux-persist"; |
No description provided.