为什么在调度时没有触发正确的操作?
Why is the correct action not triggering while dispatching?
动作
export const VERIFY = () => dispatch => {
dispatch({type: "VERIFY"})
};
减速器
const signedReducer = (state=user, action) => {
console.log(action);
switch(action.type){
case "VERIFY": {
return {...state, email: "example@gmail.com"};
}
default: {
return state;
}
}
}
_app.js
代码
import { wrapper } from '../redux/store';
function MyApp({ Component, pageProps }) {
return <>
<Component {...pageProps}/>
</>
}
MyApp.getInitialProps = async(appContext) => {
let { pageProps } = appContext
pageProps = {};
if(appContext.Component.getInitialProps){
pageProps = await appContext.Component.getInitialProps(appContext.ctx);
}
return {
pageProps,
};
};
export default wrapper.withRedux(MyApp);
& 最后 pages/home.js
import { useEffect } from "react";
import PrivateLayout from "../components/PrivateLayout/PrivateLayout";
import { connect } from "react-redux";
import { VERIFY } from "../redux/actions/signActions";
function Home() {
// console.log(user);
// useEffect(() => {
// }, [user]);
return (
<div >
{ true ?
<h1>Logged In</h1>
:
<h1>Please login again</h1>
}
</div>
)
}
const mapStateToProps = state => ({
user: state
})
const mapDispatchToProps = {
VERIFY: VERIFY
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
请检查,我在 reducer 中放了一个 console.log 语句。
每当我 运行 代码 console.log 语句仅显示这些操作类型时
- @@redux/INIT6.z.d.a.h.7
- @@redux/PROBE_UNKNOWN_ACTIONq.x.h.3.5.d
但从未采取行动VERIFY
。
浏览了互联网,但尚未找到与此相关的任何解决方案。为什么?
这应该可以解决您的问题:
您还需要在组件中调用 VERIFY。
操作:
export const VERIFY = () => ({type: "VERIFY"});
参考:https://react-redux.js.org/using-react-redux/connect-mapdispatch
动作
export const VERIFY = () => dispatch => {
dispatch({type: "VERIFY"})
};
减速器
const signedReducer = (state=user, action) => {
console.log(action);
switch(action.type){
case "VERIFY": {
return {...state, email: "example@gmail.com"};
}
default: {
return state;
}
}
}
_app.js
代码
import { wrapper } from '../redux/store';
function MyApp({ Component, pageProps }) {
return <>
<Component {...pageProps}/>
</>
}
MyApp.getInitialProps = async(appContext) => {
let { pageProps } = appContext
pageProps = {};
if(appContext.Component.getInitialProps){
pageProps = await appContext.Component.getInitialProps(appContext.ctx);
}
return {
pageProps,
};
};
export default wrapper.withRedux(MyApp);
& 最后 pages/home.js
import { useEffect } from "react";
import PrivateLayout from "../components/PrivateLayout/PrivateLayout";
import { connect } from "react-redux";
import { VERIFY } from "../redux/actions/signActions";
function Home() {
// console.log(user);
// useEffect(() => {
// }, [user]);
return (
<div >
{ true ?
<h1>Logged In</h1>
:
<h1>Please login again</h1>
}
</div>
)
}
const mapStateToProps = state => ({
user: state
})
const mapDispatchToProps = {
VERIFY: VERIFY
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
请检查,我在 reducer 中放了一个 console.log 语句。 每当我 运行 代码 console.log 语句仅显示这些操作类型时
- @@redux/INIT6.z.d.a.h.7
- @@redux/PROBE_UNKNOWN_ACTIONq.x.h.3.5.d
但从未采取行动VERIFY
。
浏览了互联网,但尚未找到与此相关的任何解决方案。为什么?
这应该可以解决您的问题:
您还需要在组件中调用 VERIFY。
操作:
export const VERIFY = () => ({type: "VERIFY"});
参考:https://react-redux.js.org/using-react-redux/connect-mapdispatch