如何使用 Redux 在 React 中配置受控输入以进行状态管理？

Question

我正在尝试创建一个受控输入文本字段，其值最终将用于发出 API 请求。问题是在输入时（意思是在文本输入中按下按键）查询一次设置为 1 个字符，实际输入中没有显示任何文本。

应用组件

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) => setQuery(e.target.value)}
        value={props.query}
      ></input>
      <BookList />
    </div>
  );
};

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

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

动作

export const setQuery = (query) => {
  console.log(query);
  return {
    type: 'SET_QUERY',
    payload: query,
  };
};

减速器

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


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

Answer 1

您的 onChange 应该是 onChange={(e) => props.setQuery(e.target.value)} - 所以使用 setQuery 的调度绑定版本。

请注意，我们不建议将 connect 与 class 组件一起使用，而是建议使用 useSelector 和 useDispatch 挂钩：https://redux.js.org/style-guide/style-guide/#use-the-react-redux-hooks-api

总的来说，这是您在此处编写的 Redux 的一种非常古老的风格，您可能一直在遵循过时的教程。现代 Redux 没有 switch..case reducers、ACTION_TYPES、手写动作创建器或使用 connect.

最新教程请关注官方教程：
https://redux.js.org/tutorials/essentials/part-1-overview-concepts

如何使用 Redux 在 React 中配置受控输入以进行状态管理？

How to configure controlled inputs in React with Redux for state management?

state

textinput

reactjs

redux