错误操作的 Redux 问题可能没有未定义的“类型”属性

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,
    }

}

reducer.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 导出您的操作并正确设置它的名称LoginState