Обновить состояние redux с помощью ввода
как я могу обновить состояние redux из текстового ввода?
Я пытаюсь сделать очень простой "Hello World"с текстовым вводом. Когда кто-то вводит текстовый ввод, он должен обновить значение "searchTerm" моего магазина.
Я не могу понять эти вещи: 1. Как я могу получить и передать значение ввода в обработчик" onChange"? 2. Действие "поиск", похоже, вызывается правильно, но моя функция редуктора никогда не используется (без консоли.бревно.)
SearchForm.js (компонент)
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {search} from 'redux/modules/search-term';
@connect(
null,
dispatch => bindActionCreators({ search }, dispatch)
)
export default class SearchForm extends Component {
static propTypes = {
search: PropTypes.func.isRequired,
}
render() {
return (
<input type="text" placeholder="Search" onChange={search} />
);
}
}
поиск-термин.js (действие и редуктор)
const SEARCH = 'redux-example/repo-filter/SEARCH';
const initialState = {
searchTerm: null
};
export default function reducer(state = initialState, action = {}) {
console.log("reducing");
switch (action.type) {
case SEARCH:
return {
searchTerm: action.term
};
default:
return state;
}
}
export function search(term) {
return {
type: SEARCH,
term
};
}
редуктор.js
import { combineReducers } from 'redux';
import multireducer from 'multireducer';
import { routerStateReducer } from 'redux-router';
import search from './search-term';
export default combineReducers({
router: routerStateReducer,
search
});
1 ответов
вы должны использовать this.props.search
при привязке создателя действия к событию изменения:
<input type="text" placeholder="Search" onChange={(event) => this.props.search(event.target.value)} />