如何连接Redux Store与React输入框 解决输入无响应值为空问题

输入框值与Redux Store的双向绑定完全可实现，你当前输入无响应、值始终为空的问题和Redux Slice写法无关，你的Slice逻辑完全正确，问题出在组件内防抖函数的使用方式上。

问题原因 #

你在组件函数体内部直接定义了debounce包裹的事件处理函数，组件每次因状态变化重渲染时，都会生成一个全新的防抖函数实例，之前输入触发的防抖定时器会随旧函数实例被销毁，最终dispatch动作根本不会执行，Store中的值始终保持初始空字符串。

修复方案 #

方案1：保留防抖逻辑（适合输入后触发搜索请求的场景） #

使用useCallback缓存防抖函数，保证组件生命周期内防抖函数只初始化一次，同时提前提取输入值避免React合成事件回收导致的取值异常，组件卸载时取消防抖避免内存泄漏：

import { useCallback, useEffect } from 'react'

const Search: React.FC = () => {
  const dispatch = useAppDispatch()
  const inputValue = useAppSelector((state) => state.inputSlice.inputValue)

  // 缓存防抖实例，仅在dispatch变化时重新生成
  const changeInputValue = useCallback(
    debounce((val: string) => {
      dispatch(inputChangeValue(val))
    }, 200),
    [dispatch]
  )

  // 组件卸载时取消未执行的防抖任务
  useEffect(() => {
    return () => changeInputValue.cancel()
  }, [changeInputValue])

  return (
    <div className={styles.search__wrapp}>
      <input
        value={inputValue}
        onChange={(e) => changeInputValue(e.target.value)}
        placeholder="Find your favorite character"
        className={styles.search}
      />
      <button className={styles.button__search}>
        <img src={search} alt="search icon" />
      </button>
      <button
        onClick={() => dispatch(removeInputField())}
        className={styles.clearInput}
      >
        <img src={closeIcon} alt="inputClear icon" />
      </button>
    </div>
  )
}

方案2：移除防抖（适合仅做值实时同步的场景） #

如果不需要延迟同步（没有输入后延迟发请求的需求），直接去掉debounce包裹即可，写法更简单也不会出问题：

const Search: React.FC = () => {
  const dispatch = useAppDispatch()
  const inputValue = useAppSelector((state) => state.inputSlice.inputValue)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    dispatch(inputChangeValue(e.target.value))
  }

  return (
    <div className={styles.search__wrapp}>
      <input
        value={inputValue}
        onChange={handleChange}
        placeholder="Find your favorite character"
        className={styles.search}
      />
      <button className={styles.button__search}>
        <img src={search} alt="search icon" />
      </button>
      <button
        onClick={() => dispatch(removeInputField())}
        className={styles.clearInput}
      >
        <img src={closeIcon} alt="inputClear icon" />
      </button>
    </div>
  )
}

注：你提供的Redux Slice代码完全符合Redux Toolkit规范，不需要做任何修改。

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