错误操作的 Redux 问题可能没有未定义的"type"属性

Question

我第一次在API中使用带有异步调用的redux。我正面临这个错误的问题"；动作可以不具有未定义的"；类型"；财产">

如果有人很了解redux，请检查此代码。我还更正了下面的文件名。

我的代码如下所述：

actionTypes.js

export const SET_LOGIN_STATE = "SET_LOGIN_STATE"

actions.js

import * as t from '../constants/actionTypes';
const setloginState = (logindata) => {
return {
type: t.SET_LOGIN_STATE,
payload: logindata,
}
}

减速器.js

import * as t from '../constants/actionTypes';

const initialState = {
isLoggedIn: false,
userId: '',
token: '',
refreshToken: '',
expiresOn: '',
data: '',
};

export const loginReducer = (state = initialState, action) => {
switch (action.type) {
case t.SET_LOGIN_STATE:
return {
...state,
...action.payload, // this is what we expect to get back from API call and login page input
isLoggedIn: true, // we set this as true on login
};
default:
return state;
}
};

store.js

import thunkMiddleware from 'redux-thunk';
import { createStore, combineReducers, applyMiddleware } from 'redux';
//import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly'; // this is for debugging with React-Native-Debugger, you may leave it out
import { loginReducer } from '../reducers/reducer';
const rootReducer = combineReducers({
loginReducer: loginReducer,
});
export const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);

UI-app.js

import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import {useForm} from 'react-hook-form';
import {useDispatch} from 'react-redux';
import {login} from './actions/actions';

function App() {
const { register, formState: { errors }, handleSubmit } = useForm();

const _doLogin =  async data => {


// axios post
return (dispatch) => { 
axios.post('/invoice/webapps/api/login', data, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}})
.then(function (response) {
var responsedata=JSON.parse(JSON.stringify(response));
if(responsedata.data.login_status === "Done"){

console.log("correct");
//  localStorage.setItem("authtoken", responsedata.data.api_token);
//dispatch(setLoginState('correct'));

}
else{ /// invalid login

console.log("correct");

}
})
.catch(function (error) {
//Swal.fire("Error", error, "warning");
console.log(error);
});

}

}


return (
<div className="App">
<div>Login 
<form className="form" onSubmit={handleSubmit(useDispatch(_doLogin))}>
Enter your username : <input className="form-control h-auto form-control-solid py-4 px-8" type="text" 
placeholder="Email"  autoComplete="off" {...register("email", {
required: true, 
pattern: {
value: /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/,
message: 'Please enter a valid email',
}, })}/>
Enter your password :   <input className="form-control h-auto form-control-solid py-4 px-8" type="password"
placeholder="Password" autoComplete="off" 
{...register("password", {
required: true, 
})} />
<input type="submit" value="Login"/>
</form>
</div>
</div>
);
}

export default App;

Answer 1

我认为useDispatch不是这样使用的。在组件的主体上，你需要这样称呼它：

const dispatch = useDispatch();

然后在_doLogin中使用

绑定你的submitHandler应该这样做：onSubmit={handleSubmit(_doLogin)}

完整的代码是：

import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import {useForm} from 'react-hook-form';
import {useDispatch} from 'react-redux';
import {setLoginState} from './actions/actions';

function App() {
const { register, formState: { errors }, handleSubmit } = useForm();
const dispatch = useDispatch();

const _doLogin =  async data => {
//axios post
return axios.post('/invoice/webapps/api/login', data, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}}).then(function (response) {
var responsedata=JSON.parse(JSON.stringify(response));
if(responsedata.data.login_status === "Done"){
console.log("correct");
//localStorage.setItem("authtoken", responsedata.data.api_token);
dispatch(setLoginState('correct'));
} else {
// invalid login
}
}).catch(function (error) {
//Swal.fire("Error", error, "warning");
console.log(error);
});    
}


return (
<div className="App">
<div>Login 
<form className="form" onSubmit={handleSubmit(_doLogin)}>
Enter your username : <input className="form-control h-auto form-control-solid py-4 px-8" type="text" 
placeholder="Email"  autoComplete="off" {...register("email", {
required: true, 
pattern: {
value: /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/,
message: 'Please enter a valid email',
}, })}/>
Enter your password :   <input className="form-control h-auto form-control-solid py-4 px-8" type="password"
placeholder="Password" autoComplete="off" 
{...register("password", {
required: true, 
})} />
<input type="submit" value="Login"/>
</form>
</div>
</div>
);
}

export default App;

编辑1

确保从actions.js导出您的操作并将其命名为正确设置的L登录状态