如何在React中结合Redux状态管理配置受控输入并解决输入异常问题

• 组件内未通过props调用绑定后的action创建函数：通过connect第二个参数将setQuery包装为自动dispatch的版本注入到了组件props中，直接调用原始导入的setQuery不会触发Redux的状态更新流程，导致props.query始终为空，输入框无显示内容。
• Reducer逻辑错误：setQuery的payload是输入框的完整当前值，而非本次新增的单个字符，当前reducer中将旧状态和payload拼接，会导致输入值被重复累加，出现输入异常。

1. 修改App组件的onChange逻辑，调用props上绑定的setQuery：

import React from 'react';
import BookList from './BookList';
import { connect } from 'react-redux';
import { setQuery } from '../actions';

const App = (props) => {
  return (
    <div>
      <input
        type="text"
        onChange={(e) => props.setQuery(e.target.value)}
        value={props.query}
      />
      <BookList />
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    query: state.query,
  };
};

export default connect(mapStateToProps, { setQuery })(App);

2. 修改reducer的SET_QUERY分支逻辑，直接返回完整输入值：

const queryReducer = (state = '', action) => {
  switch (action.type) {
    case 'SET_QUERY':
      return action.payload;
    default:
      return state;
  }
};


export default combineReducers({
  query: queryReducer,
});

内容的提问来源于stack exchange，提问作者Lucian Anghel