redux 在函数属性中使用有用值

nbysray5 于 9个月前发布在其他

关注(0)|答案(1)|浏览(101)

我有一个React应用程序，它依赖于useSelector侦听器在函数中生成的值，我将该值作为属性传递给子组件：

import React from "react";
import { Button } from "./Button"
import {useSelector} from "react-redux";
import {getButtonValue} from "../redux/store"
 
export const Parent = () => {
    const buttonValue = useSelector(getButtonValue);

    const onSubmit = () => console.log(`here with value '${buttonValue}'`);

    return <Button onSubmit={onSubmit} />
}

字符串
子按钮：

import React from "react";
import { useDispatch } from 'react-redux'
import {setButtonValue} from "../redux/store";

type Props = {
    onSubmit: () => void;
};

export const Button = ({onSubmit}: Props) => {
    const dispatch = useDispatch();

    const onButtonClick = () => {
        dispatch(setButtonValue("inside button"));
        onSubmit();
    }

    return <div onClick={onButtonClick}>Click me!</div>
}

型
当用户单击此按钮时，输出的控制台显示为here with value 'initial value'，而我希望选择器的值为inside button，因为它只是在单击按钮时设置的。
我了解到，这个值似乎没有更新的原因是因为dispatch()是一个codec操作，因此控制台很可能在选择器更新和onSubmit定义重新呈现之前发生。建议在按钮单击时直接将buttonValue传递给函数prop。在这个特定的例子中，但是在我们的真实的应用程序中，当Parent和Button组件被8-10个其他组件分开时，情况要复杂得多（导致大量的支柱钻孔）。这仍然是建议的解决方案吗？或者有更好的处理方法吗？
在这里寻找关于最佳实践的建议。
An example of this in playground

redux

来源：https://stackoverflow.com/questions/77582129/using-useselector-value-in-function-property

1条答案

按热度按时间

wrrgggsh1#

这里的问题是，onSubmit在单击 * 按钮并分派setButtonValue操作来更新该状态之前，在 * 中选择的buttonValue上有一个陈旧的闭包。
由于这里没有涉及到异步逻辑，我不建议更新redux代码来使setButtonValue成为异步操作。
这里我的建议是简单地导入store并在onSubmit回调中访问当前状态。
范例：

import React from "react";
import { Button } from "./Button"
import { useSelector} from "react-redux";
import store from "../redux";
import { getButtonValue } from "../redux/store";
 
export const Parent = () => {
  const buttonValue = useSelector(getButtonValue);

  const onSubmit = () => {
    const insideButtonValue = getButtonValue(store.getState());
    console.log(`Closed over outside button value '${buttonValue}'`);
    console.log(`Inside button value '${insideButtonValue}'`);
  };

  return (
    <div>
      <span>Hello world!</span>
      <Button onSubmit={onSubmit} />
    </div>
  );
};

字符串

的数据

赞(0）回复(0）举报 9个月前

我来回答

redux 在函数属性中使用有用值

1条答案

相关问题

热门标签

最新问答