Разбираюсь на примере
https://github.com/davidchang/redux-pokedex
И нужно событие при нажатии на кнопку заменить на удаление строки, содержащей кнопку.
Изменил здесь onClick
components\PokemonItem.js
import React, { Component, PropTypes } from 'react';
export default class PokemonItem extends Component {
static propTypes = {
pokemon2: PropTypes.object.isRequired,
caught: PropTypes.bool.isRequired,
actions: PropTypes.object.isRequired
};
render() {
const {pokemon2, caught, actions} = this.props;
return (
<tr className={caught ? 'success' : ''}>
<td>{pokemon2.name}</td>
<td>{pokemon2.type}</td>
<td>{pokemon2.stage}</td>
<td>{pokemon2.species}</td>
<td>
{caught ?
'Caught!' :
<button
type="button"
onClick={() => actions.del(pokemon2.name)}
className="btn btn-primary">
Catch
</button>
}
</td>
</tr>
);
}
}
components\PokemonList.js
import React, { Component, PropTypes } from 'react';
import PokemonItem from './PokemonItem';
export default class PokemonList extends Component {
static propTypes = {
pokemon2: PropTypes.array.isRequired,
caughtPokemon: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
render() {
const {pokemon2, caughtPokemon, actions} = this.props;
return (
<table className="table table-striped">
<tbody>
{pokemon2.map(pokemonObject =>
<PokemonItem
key={pokemonObject.name}
pokemon2={pokemonObject}
/*caught={caughtPokemon.indexOf(pokemonObject.name) > -1}*/
actions={actions} />
)}
</tbody>
</table>
);
}
}
По идее так должен редьюсер выглядеть
reducers\pokemon.js
import { SEARCH_INPUT_CHANGED, MARK_CAUGHT } from '../constants/ActionTypes';
import { Pokemon } from '../constants/Pokemon';
const initialState = {
pokemon2 : Pokemon
};
export default function pokemon2(state = initialState, action) {
switch (action.type) {
case MARK_CAUGHT:
return state.filter(item => item.name !== action.name);;
default:
return state;
}
}
Но консоль выбивает "state.filter is not a function"
Подскажите, где может быть ошибка?
Простой
