Instantly share code, notes, and snippets.

Embed
What would you like to do?
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