[英]useDispatch using lower version of react-redux
I am encountering a function not found using useDispatch.我遇到了使用 useDispatch 找不到的 function。 Supposedly, I should be using react-redux, unfortunately, my version is 6.0.0 and what's needed is 7.0.0 and above.
假设我应该使用react-redux,不幸的是,我的版本是6.0.0,需要的是7.0.0及以上。 I'd like to explore useDispatch or related hook to dispatch an action function inside a function component.
我想探索 useDispatch 或相关的钩子来在 function 组件内调度一个动作 function 。 How do I do this given that I cannot upgrade my react-redux & still use function component?
鉴于我无法升级我的 react-redux 并且仍然使用 function 组件,我该怎么做?
My alternative is to use class component, but again, I'd like to see this work in function component.我的替代方法是使用 class 组件,但同样,我希望在 function 组件中看到这项工作。 Let me know what other details needed.
让我知道还需要什么其他细节。
Here's my code.这是我的代码。
import React, { useDispatch } from 'react';
import {
Tooltip,
IconButton,
Icon,
} from '@material-ui/core';
import { logout } from './auth/store/actions';
const QuickLogout = () => {
const dispatch = useDispatch();
const handleClick = () => {
dispatch(logout());
};
return (
<Tooltip title="Logout" placement="bottom">
<IconButton className="w-64 h-64" onClick={handleClick}>
<Icon>exit_to_app</Icon>
</IconButton>
</Tooltip>
);
};
export default QuickLogout;
And here's the error when compiling.这是编译时的错误。
TypeError: Object(...) is not a function
QuickLogout
webpack-internal:///.....onents/QuickLogout.js:18:75
Edit: I mentioned exploring useDispatch or related hooks given that I cannot upgrade.编辑:我提到了探索 useDispatch 或相关的钩子,因为我无法升级。 I felt that this is a gray statement as I really just wanted my code to work.
我觉得这是一个灰色的声明,因为我真的只是希望我的代码能够工作。 That means, solution is not limited to useDispatch or other hooks.
这意味着,解决方案不仅限于 useDispatch 或其他钩子。 Hence, I chose the answer that did not use useDispatch or hooks because it was plain simple.
因此,我选择了不使用 useDispatch 或 hooks 的答案,因为它很简单。 Apologies for the vague statement.
为含糊的陈述道歉。 I'll take note on improving my writing skills.
我会注意提高我的写作技巧。
React itself doesn't have useDispatch
in it Hooks API , but it has useReducer
to eliminate redux for a small project that redux is an overengineering process for them. React 本身没有
useDispatch
Hooks API ,但它有useReducer
来消除 redux 的小项目,因为 redux 是一个过度工程化的过程。
On the other hand, new versions of react-redux
provide new handy hooks which you can make a similar version of those by yourself.另一方面,新版本的
react-redux
提供了新的方便的挂钩,您可以自己制作类似的挂钩。
Here is a Tip这是一个提示
Hooks (React hooks) can only be used in functional component
Hooks(React hooks)只能在功能组件中使用
HOC (Higher-order component) can be used anywhereHOC(高阶组件)可以在任何地方使用
The connect
function which react-redux
provides is HOC so it can also be used with both class-base and functional components. react-redux
提供的connect
function 是 HOC,因此它也可以与类基组件和功能组件一起使用。 It is also a good practice to separate your presentation UI and logic into representational
s and container
s, hence there will be no problem for your component to be functional and use all fancy things that could be used in traditional class-component and connect by react-redux.将您的演示 UI 和逻辑分离为
representational
和container
也是一个很好的做法,因此您的组件可以正常工作并使用所有可以在传统类组件中使用并通过 react-redux 连接的花哨的东西是没有问题的.
you can also make your custom hook for handling such things in a re-usable manner with less code.您还可以使用更少的代码以可重用的方式制作自定义挂钩来处理此类事情。
// setup.js
const store = createStore(/* put your reducer and enhancers here */)
export const { dispatch, getState } = store
// hooks.js
import { dispatch, getState } from '~setup.js'
export const useDispatch = () => dispatch
export const useSelector = selector => selector(getState())
Then in your component然后在你的组件中
import { useDispatch } from '~hooks.js'
import { logout } from './auth/store/actions'
export default function QuickLogout() {
const dispatch = useDispatch()
const handleClick = () => {
dispatch(logout())
}
return (
<Tooltip>
<IconButton onClick={handleClick}>
<Icon>exit_to_app</Icon>
</IconButton>
</Tooltip>
)
}
If you want to know more about custom hooks see making my own hook .如果您想了解更多关于自定义钩子的信息,请参阅制作我自己的钩子。
If you can't upgrade your react-redux
version to one with the useDispatch
and useSelector
React hooks you can still use the connect Higher Order Component to inject dispatch
, or to even more simply wrap your action creators with a call to dispatch
.如果您无法使用
useDispatch
和useSelector
React 挂钩将react-redux
版本升级到一个版本,您仍然可以使用connect高阶组件来注入dispatch
,或者更简单地通过调用dispatch
来包装您的动作创建者。
import { connect } from 'react-redux';
const QuickLogout = ({ logout }) => { // <-- destructure logout prop
return (
<Tooltip title="Logout" placement="bottom">
<IconButton
className="w-64 h-64"
onClick={logout} // <-- assign to click handler
>
<Icon>exit_to_app</Icon>
</IconButton>
</Tooltip>
);
};
const mapDispatchToProps = {
logout, // <-- inject logout action as prop already wrapped by dispatch!
};
const ConnectedQuickLogout = connect(
null, // <-- this is typically mapStateToProps, but we don't need it
mapDispatchToProps,
)(QuickLogout);
export default ConnectedQuickLogout;
If you prefer to keep the code closer to as-is then you can simply connect it to the redux store and a dispatch
prop is still injected.如果您希望保持代码更接近原样,那么您只需将其连接到 redux 存储区,仍然会注入
dispatch
prop。
import { connect } from 'react-redux';
const QuickLogout = ({ dispatch }) => {
const handleClick = () => {
dispatch(logout());
};
return (
<Tooltip title="Logout" placement="bottom">
<IconButton className="w-64 h-64" onClick={handleClick}>
<Icon>exit_to_app</Icon>
</IconButton>
</Tooltip>
);
};
export default connect()(QuickLogout);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.