function searchTermChanged(searchTerm) { | |
return { | |
type: 'SEARCH_INPUT_CHANGED', | |
payload: { searchTerm }, | |
}; | |
} | |
function markCaught(name) { | |
console.log('hello'); | |
return { | |
type: 'MARK_CAUGHT', | |
payload: { name }, | |
}; | |
} | |
export default { | |
searchTermChanged, | |
markCaught, | |
}; |
import React from 'react'; | |
import { connect } from 'react-redux'; | |
import actions from './actions'; | |
function App({ | |
caughtPokemon, | |
markCaught, | |
pokemon, | |
searchTerm, | |
searchTermChanged, | |
}) { | |
return ( | |
<section> | |
<h1>Pokedex in Redux</h1> | |
... A bunch of other stuff making use of the props... | |
</section> | |
); | |
} | |
export default connect(store => store, actions)(App); |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { Provider } from 'react-redux'; | |
import { createStore } from 'redux'; | |
import reducers from './reducers'; | |
import App from './App'; | |
const store = createStore(reducers); | |
ReactDOM.render( | |
<Provider store={store}> | |
<App /> | |
</Provider>, | |
document.getElementById('root'), | |
); |
import Pokemon from './pokemon'; | |
const initialState = { | |
pokemon: Pokemon, | |
searchTerm: '', | |
caughtPokemon: [], | |
}; | |
export default function pokemon(state = initialState, action) { | |
switch (action.type) { | |
case 'SEARCH_INPUT_CHANGED': | |
const { searchTerm } = action.payload; | |
return { | |
...state, | |
searchTerm: searchTerm, | |
pokemon: searchTerm | |
? Pokemon.filter( | |
pokemon => | |
pokemon.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > | |
-1, | |
) | |
: Pokemon, | |
}; | |
case 'MARK_CAUGHT': | |
return { | |
...state, | |
caughtPokemon: [...state.caughtPokemon, action.payload.name], | |
}; | |
default: | |
return state; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment