RTK 查询 - 表单提交突变后的调度操作答案

【问题标题】：RTK Query - Dispatch action after mutation in form submissionRTK 查询 - 表单提交突变后的调度操作
【发布时间】：2022-06-10 17:39:41
【问题描述】：

所以我只是在学习 RTK 查询，我试图在表单中运行一个突变钩子后调度一个动作。我的代码如下所示：

const Login = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();
  const [postCredentials, { isSuccess }] = useLoginMutation();
  const dispatch = useDispatch();

  const onSubmit = async (data: any) => {
    await postCredentials({
      username: data.username,
      password: data.password,
    });
    console.log('RESULT', isSuccess);

    // {
    //   isSuccess && dispatch(setUserStatus({ isLoggedIn: true }));
    // }
  };
---------------

当我提交表单时，它确实会发布到端点并成功响应（Chrome 开发工具中的网络选项卡）。我的问题是在await postCredentials() 函数之后console.log(isSuccess) 是假的，即使我知道POST 是成功的。如果我再次单击，则 console.log(isSuccess) 为真。任何想法我做错了什么？我希望isSuccess 第一次是真的，这样我就可以调度一个新的动作。 TIA

【问题讨论】：

标签： reactjs react-hooks react-redux rtk-query

【解决方案1】：

你在这里有一个过时的参考。

看这个例子：

let a = 0
function MyComponent(){
  const b = a
  function increment(){
    console.log(b)
    a++
    console.log(b)
  }
  useEffect(increment)
}

foo 是您的组件。不管你在a这里改变多少，b是它的副本，不会改变。如果您再次运行该函数（这是组件重新渲染所做的），在新执行的范围内将有一个名为 b 的新变量 - 并且还会有一个新的函数在新执行的范围内称为increment。那个“新”increment" can read the "new value" of b`，但不会再得到任何更新那个。

所以：isSuccess 永远不会在你的 onSubmit 方法的一次执行中改变。

你可以做的是unwrap结果：

const onSubmit = async (data: any) => {
  try {
    const result = await postCredentials({
      username: data.username,
      password: data.password,
    }).unwrap();
    console.log('RESULT', result);
    dispatch(setUserStatus({ isLoggedIn: true }));
  } catch (e) {
  }
  };

话虽如此，还有另一种解决方案：根本不要使用setUserStatus。

将api.endpoints.postCredentials.matchFulfilled 案例的侦听器添加到用户状态片的extraReducers。这样，每当postCredetials 成功执行时，该切片就可以对其做出反应并做出相应的更改。

【讨论】：