使用输入更新redux状态

Question

如何从文本输入框更新redux的状态？

我想要实现一个非常简单的“Hello World”例子，其中包含一个文本输入框。当有人在文本输入框中键入时，它应该更新我的存储器中的“searchTerm”值。

我无法弄清以下几点： 1. 如何获取并将输入的值传递给它的“onChange”处理程序？ 2. “搜索”操作似乎被正确调用，但我的reducer函数从未被使用（没有console.log）。

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
  };
}

reducer.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
});

- Don P

Answer 1

当绑定 action creator 到 change 事件时，应使用 this.props.search： <input type="text" placeholder="搜索" onChange={(event) => this.props.search(event.target.value)} />

- Atanas Korchev

---

真棒，现在就试试看。 - Don P