在 React Redux 中使用 Input答案

【问题标题】：Using Input with React Redux在 React Redux 中使用 Input
【发布时间】：2021-06-19 23:16:45
【问题描述】：

我有一个简单的输入，可以在两个不同的组件中使用，所以为了共享这个输入的状态，我决定使用 reducer。

这是我的解决方案：

index.js
.....
const Index = () => {
    const store = createStore(rootReducer, applyMiddleware(thunk));
.............

减速器

const initialState = {
    inputValue: "Testing.com"
}

const nameReducerr = (state = initialState, action) => {
    switch (action.type) {
        case "INPUT_CHANGE":
            return Object.assign({}, state, {inputValue: action.text})
        default:
            return state
    }
}

export default nameReducerr

这是我的组件

import React, {useState} from 'react'
import {useSelector, useDispatch } from "react-redux"

function inputData() {
    const [name, setName] = useState('');
    const inputValue = useSelector(state => state.inputValue);
    const dispatch = useDispatch();

    const handleKeyDown = (event) => {
        if (event.key === "Enter") {
          dispatch(setName(event.target.value));
        }
      };
    
      console.log('input value', inputValue);
    return (
        <div>
                <input
                    onKeyDown={handleKeyDown}
                    type="text"
                    className="form-control address"
                    name=""
                  />
                  <h1>Name: {name}</h1>
                  <h1>Input Value: {inputValue}</h1>
        </div>
    )
}

export default input data

很遗憾，我收到以下错误。

Error: Actions must be plain objects. Use custom middleware for async actions.

我在这里做错了什么？谢谢

【问题讨论】：

您正在调度 SetStateAction (setName) 而不是带有 type 和 text 的对象。你想dispatch({ type: 'INPUT_CHANGE', text: event.target.value })
嗨兄弟，这给我错误：input value undefined

标签： javascript reactjs redux react-redux react-hooks

【解决方案1】：

setName 是本地反应状态的设置器，与 redux 无关 - 所以它的结果不能被调度。您将需要编写一个动作创建器。

通常，useState 是本地组件状态。所以它也不会以任何方式从 redux 存储中选择值，这将是你的下一个问题。您需要改用useSelector。

另外，你在这里使用了一种非常过时的 redux 风格，我们不再推荐。要学习现代 redux，请按照https://redux.js.org/tutorials/index 的官方教程进行操作 - 最后您将编写更少且更安全的代码。

【讨论】：

嗨，兄弟，好的，您能否提供一个简单的演示，说明如何使用现代方式处理 redux 中的输入，感谢您提供的链接，我将检查
您在这里遇到的问题与“old vs modern redux”无关，这更像是一个一般性的暗示，您可能正在遵循一个非常过时的教程。这里的问题是您将 React 钩子“useState”与 Redux 混合在一起，这是两个完全独立的概念。只是在这里给你解决方案不会帮助你学习。这不是一个需要纠正的小错误，这是一个基本的问题，所以我真的认为你应该重新阅读我的答案，告诉你所有要使用的东西，然后自己尝试。
是的，我正在关注本教程 youtube.com/watch?v=MOO5hit7s0U 使用 redux 处理输入，如果您有关于如何使用 redux 处理输入的现代教程，我将不胜感激
任何方式都遵循您的链接文档并解决了问题