使用React Redux的输入

Question

我有一个简单的输入，可以在两个不同的组件中使用，所以为了共享这个输入的状态，我决定使用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.

我在这里做错了什么？thx

Answer 1

setName是本地react状态的设置器，与redux无关，因此其结果无法调度。你需要写一个动作创作者。

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

此外，您在这里使用了一种非常过时的redux风格，我们不建议再使用这种风格。要学习现代redux，请参阅官方教程https://redux.js.org/tutorials/index-最终，您将编写更少、更安全的代码。