あなたは反応reduxフックを試してみなければならない!
9500 ワード
読者は、反応プロジェクトでReduxを使用している場合は、これらの反応reduxフックを試してみてください.あなたはそれらを愛する!
古い道を見てください.
アクションのディスパッチも同様です.
フックの前に
古い道を見てください.
const UserComponent = (props) => {
return (
<div>
{props.profile.name}
</div>
)
}
function mapStateToProps(state) {
return {
profile: state.userReducer.profile,
auth: state.authReducer.auth
}
}
export default connect(mapStateToProps)(UserComponent);
フックの方法import { useSelector } from 'react-redux';
const UserComponent = (props) => {
const profile = useSelector(state => state.userReducer.profile);
const auth = useSelector(state => state.authReducer.auth);
return (
<div>
{props.profile.name}
</div>
)
}
export default UserComponent;
アクションのディスパッチも同様です.
フックの前に
const UserComponent = (props) => {
const login = () => {
props.login();
}
return (
<div>
{props.profile.name}
</div>
)
}
function mapStateToProps(state) {
return {
profile: state.userReducer.profile,
auth: state.authReducer.auth
}
}
function mapDispatchToProps(dispatch) {
return {
login: () => dispatch(userActions.login),
logout: () => dispatch(userActions.logout),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(UserComponent);
その後import { useSelector, useDispatch } from 'react-redux';
import userActions from './actions';
const UserComponent = (props) => {
const profile = useSelector(state => state.userReducer.profile);
const auth = useSelector(state => state.authReducer.auth);
const dispatch = useDispatch();
const login = () => {
dispatch(userActions.login);
}
return (
<div>
{props.profile.name}
</div>
)
}
export default UserComponent;
あなたはこれらのフックを試してください!以上です.楽しい週末を😀😀Reference
この問題について(あなたは反応reduxフックを試してみなければならない!), 我々は、より多くの情報をここで見つけました https://dev.to/mwoodson/you-gotta-try-the-react-redux-hooks-1cooテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol