使用选择器挂钩和转发器

Question

--edit--我创建了一个代码沙盒：https://codesandbox.io/s/xenodochial-hofstadter-d3jjo

我开始挠头了，我想在一个简单的问题上需要一些帮助。

我有一个基本的应用程序组件，可以呈现受控的文本输入。提交此输入后，它会在后端创建一条消息，更新redux存储。这部分似乎一切都很顺利。

我的问题是，在添加新消息后，我试图添加useEffect挂钩来重置输入值。我注意到，依赖于[messages]的useEffect在每次渲染时都会被调用，而不仅仅是在messages发生更改时。在输入中键入一个简单的动作(这会导致每个字符都有一个重新应答器(会触发钩子，即使它仍然是相同的值：一个空数组。

基本上，我已经注意到，只有当我的useSelector返回相同的数组实例时，它才能正常工作。因此，如果我只读取state.messages.allIds，它会起作用，因为数组不会改变。但是只要添加一个.map(x => x)，它每次都会返回一个新实例。我添加了react redux的shallowEqual来尝试解决这个问题，但没有成功，我不明白为什么它不能解决我的问题。

const App = () => {
const [message, setMessage] = useState('');
const messages = useSelector(
(state: RootState) => (
state.messages.allIds.map((id: string) => state.messages.byId[id])
),
shallowEqual,
);
useEffect(() => {
console.log('useEffect');
}, [messages]);
// ...
return (
<form onSubmit={/* ... */}>
<input
onChange={event => setMessage(event.target.value)}
value={message}
/>
</form>
);
}

Answer 1

这可能来得很晚。但这可能会让其他面临同样问题的人受益。

如果您不希望函数在状态更改时重新呈现，并且只想提取redux状态变量的值，则可以使用useState

const state = useState();
const yourVariable = state.getState().reduxStateVariable;