使用输入更新 redux 状态

Posted 2023-02-22

【中文标题】使用输入更新 redux 状态

【英文标题】：Update redux state with an input

【发布时间】：2016-04-01 03:59:55

【问题描述】：

如何通过文本输入更新 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 />
    );
  

search-term.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
);

【参考方案1】：

在将动作创建者绑定到更改事件时，您应该使用this.props.search：

<input type="text" placeholder="Search" onChange=(event) => this.props.search(event.target.value) />

【讨论】：

现在试试这个太棒了