将基于 redux 类的组件重构为带有钩子的功能组件.获取有关异步操作的错误.为什么?

我正在学习一个教程，老师在课堂上使用react-redux。为了更好地理解它，我决定使用钩子。

不幸的是，我遇到了一个问题，需要你的帮助。

教程应用使用 oauth 在 gapi 中登录。为此，使用了一个按钮，根据显示的授权状态，该按钮可以登录或注销。登录时，可以在弹出窗口中选择谷歌帐户。但是当我单击此按钮登录时，我收到一个错误，上面写着：

错误：操作必须是普通对象。使用自定义中间件执行异步操作。

1(但是在我的应用程序中，我将名为useEffect()的钩子与.then一起使用，以省略像thunk这样的中间件的使用。还是我错了？

2(我应该在我的应用程序中使用useEffect()和useDispatch()，还是可以使用useSelector()(或/和useDispatch()，或/和useEffect()(完成所有工作

3(教程代码使用{ connect }相当于useSelector()。我没有使用不必要的useDispatch()和/或useEffect()吗？如果是，那么如何在没有调度的情况下更改按钮的文本？

以下是教程代码：

import React from 'react';
import { connect } from 'react-redux';
import { signIn, signOut } from '../actions';
class GoogleAuth extends React.Component {
componentDidMount() {
window.gapi.load('client:auth2', () => {
window.gapi.client
.init({
clientId:
'797401886567-9cumct9mrt3v2va409rasa7fa6fq02hh.apps.googleusercontent.com',
scope: 'email'
})
.then(() => {
this.auth = window.gapi.auth2.getAuthInstance();
this.onAuthChange(this.auth.isSignedIn.get());
this.auth.isSignedIn.listen(this.onAuthChange);
});
});
}
onAuthChange = isSignedIn => {
if (isSignedIn) {
this.props.signIn(this.auth.currentUser.get().getId());
} else {
this.props.signOut();
}
};
onSignInClick = () => {
this.auth.signIn();
};
onSignOutClick = () => {
this.auth.signOut();
};
renderAuthButton() {
if (this.props.isSignedIn === null) {
return null;
} else if (this.props.isSignedIn) {
return (
<button onClick={this.onSignOutClick} className="ui red google button">
<i className="google icon" />
Sign Out
</button>
);
} else {
return (
<button onClick={this.onSignInClick} className="ui red google button">
<i className="google icon" />
Sign In with Google
</button>
);
}
}
render() {
return <div>{this.renderAuthButton()}</div>;
}
}
const mapStateToProps = state => {
return { isSignedIn: state.auth.isSignedIn };
};
export default connect(
mapStateToProps,
{ signIn, signOut }
)(GoogleAuth);

和我的代码：

import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { signIn, signOut } from "../actions";
const API_KEY = process.env.REACT_APP_API_KEY;
const GoogleAuth = () => {
const isSignedIn = useSelector((state) => state.auth.isSignedIn);
console.log("IsSignedIn useSelector: " + isSignedIn);
const dispatch = useDispatch();
useEffect(
() => {
const onAuthChange = () => {
if (isSignedIn) {
dispatch(signIn(window.gapi.auth2.getAuthInstance().currentUser.get().getId()));
} else {
dispatch(signOut());
}
};
window.gapi.load("client:auth2", () => {
window.gapi.client
.init({
clientId: API_KEY,
scope: "email"
})
.then(() => {
onAuthChange(window.gapi.auth2.getAuthInstance().isSignedIn.get());
console.log("isSignedIn.get(): " + window.gapi.auth2.getAuthInstance().isSignedIn.get());
window.gapi.auth2.getAuthInstance().isSignedIn.listen(onAuthChange);
});
});
},
[ dispatch, isSignedIn ]
);
const onSignInOnClick = () => {
dispatch(window.gapi.auth2.getAuthInstance().signIn());
};
const onSignOutOnClick = () => {
dispatch(window.gapi.auth2.getAuthInstance().signOut());
};
const renderAuthButton = () => {
if (isSignedIn === null) {
return null;
} else if (isSignedIn) {
return (
<button onClick={onSignOutOnClick} className="ui red google button">
<i className="google icon" />
Sign Out
</button>
);
} else {
return (
<button onClick={onSignInOnClick} className="ui red google button">
<i className="google icon" />
Sign In with Google
</button>
);
}
};
return <div>{renderAuthButton()}</div>;
};
export default GoogleAuth;

您有一条错误消息：错误：操作必须是普通对象。使用自定义中间件执行异步操作。

没错。如果没有可以处理另一种类型操作的中间件，这是行不通的。

1(但是在我的应用程序中，我将名为useEffect((的钩子与.then一起使用，以省略像thunk这样的中间件的使用。还是我错了？

useEffect和.then与 redux 无关。你错了。你正在使用的操作是thunks(返回函数(dispatch，getState(的函数(，你肯定需要一个redux-thunk

2(我应该在我的应用程序中使用useEffect((和useDispatch((，还是可以使用useSelector(((或/和useDispatch((，或/和useEffect((完成所有工作

您需要useEffect才能在组件挂载时调用第三方 API。您需要useDispatch才能获得dispatch函数。您需要useSelector才能从 redux 存储中获取值。

3( 教程代码使用 { connect }，它等效于 useSelector((。我没有使用不必要的useDispatch((和/或useEffect((吗？如果是，那么如何在没有调度的情况下更改按钮的文本？

代码：(可以破解(

const GoogleAuth = () => {
const isSignedIn = useSelector((state) => state.auth.isSignedIn);
const dispatch = useDispatch();
useEffect(
() => {
const onAuthChange = (isSignedInLocal) => {
if (isSignedInLocal) {
dispatch(signIn(window.gapi.auth2.getAuthInstance().currentUser.get().getId()));
} else {
dispatch(signOut());
}
};
window.gapi.load("client:auth2", () => {
window.gapi.client
.init({
clientId: API_KEY,
scope: "email"
})
.then(() => {
onAuthChange(window.gapi.auth2.getAuthInstance().isSignedIn.get());

window.gapi.auth2.getAuthInstance().isSignedIn.listen(onAuthChange);
});
});
},
[dispatch]
);
const onSignInOnClick = () => {
dispatch(window.gapi.auth2.getAuthInstance().signIn());
};
const onSignOutOnClick = () => {
dispatch(window.gapi.auth2.getAuthInstance().signOut());
};
const renderAuthButton = () => {
if (isSignedIn === null) {
return null;
} else if (isSignedIn) {
return (
<button onClick={onSignOutOnClick} className="ui red google button">
<i className="google icon" />
Sign Out
</button>
);
} else {
return (
<button onClick={onSignInOnClick} className="ui red google button">
<i className="google icon" />
Sign In with Google
</button>
);
}
};
return <div>{renderAuthButton()}</div>;
};
export default GoogleAuth;

确保不要提供isSignedIn作为useEffect的依赖项。

Redux 有一些特定的用例和缺点，但引入了一些缺点，比如很多样板。不知道为什么需要 redux 可能表明您不需要 redux。

然而： useState 和 useEffect 是两个基本的 React 原语。[state, setState] = useState(initialState)允许您使用状态并设置它; 每当其中一个依赖项发生更改时，useEffect(callback, [deps])都会触发回调。您可能不需要其他任何东西。

Redux 使用不同的方法：

它对整个应用程序使用单个集中状态(您可以使用useSelector()钩子进入任何组件
允许您通过普通的javascript对象(如{ type: 'SIGN_IN', payload: { token: '42' } }(更改它，并为每个对象定义状态应该如何更改(定义所谓的"reducer"函数(。您可以通过dispatch()函数调度这些状态更改。

那么效果呢？由于调度仅将对象作为参数(因为业务逻辑是在其他地方定义的(，因此向它传递函数或承诺是没有意义的。但是您可以通过多种方式触发它们：

直接在回调中，例如<button onClick={() => auth.signIn()}> Sign in </button>.这绝对没问题。
在 useEffect 钩子中，如果您需要触发效果作为状态更改的响应。例如：useEffect( () => console.log(`count changed, new value is: ${count}`), [count])
通过冗余中间件

选项 1 和 2 完全没问题，但缺点是您必须在本地定义业务逻辑，而不是将其与视图分离。在不同的位置定义它可以让您更轻松地扩展和维护应用。

自定义中间件增强了dispatch()的工作方式。最简单的方法之一是 redux-thunk。它允许您传递回调以调度：

// somewhere in the codebase:
function signIn(){
window.gapi.auth2.getAuthInstance().signOut()
}
...
// Inside you button:
<button onClick={() => dispatch(signIn())}> Sign Out </button>

有更复杂的效果模型，但你可以坚持使用redux-thunk，除非你需要更强大的东西。

请记住，这些框架中的每一个都只是一个具有特定权衡的工具，除非你真的有理由使用它们，否则你可以坚持使用优秀的 React 原语，而不是无缘无故地过度设计你的应用程序。

相关内容

最新更新

热门标签：