React：动作必须是普通对象

Question

我有以下项目结构-

我有 GlobalStore.js，其中有以下代码：-

import React from 'react'

const GlobalContext=React.createContext();
const GlobalProvider=GlobalContext.Provider;
const GlobalConsumer=GlobalContext.Consumer;


export  {GlobalProvider,GlobalConsumer}

LoginReducers/Login_Action.js 带有以下代码 -

const VERIFY_CREDENTIALS ='VERIFY_CREDENTIALS'
export function VerifyCredentials()
{
    return{
        type :VERIFY_CREDENTIALS
    }
}

LoginReducers/Login_Reducers.js 带有以下代码 -

import Axios from "axios";
import { VerifyCredentials } from "./Login_Action";

const initialState={
    userName:"",
    password:"",
    isVarified:false
}
const url='http://localhost:52016/api/values/';
export const  LoginReducer=(state=initialState,action)=>{
    switch (action.type) {
        case 'VERIFY_CREDENTIALS':
            
            Axios.get(url)
                 .then(x=>{
                     alert(x.data);

                 })
    
        default:
            break;
    }
}

GlobalStorage/store.js 与以下代码 -

import { createStore } from 'redux';
import { LoginReducer } from "../Components/LoginReducers/Login_Reducers";

export const  store=createStore(LoginReducer);

App.js 与以下代码 -

import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import { store } from "./GlobalStorage/store";
import   {GlobalProvider,GlobalConsumer} from "./GlobalStore";
function App() {
  return (
    <div className="App">
      <GlobalProvider value={store}> 
     <Login></Login>
     </GlobalProvider>
    </div>
  );
}

export default App;

我遇到以下错误：-

请建议可以进行哪些更改以解决此错误？

另外请建议是否推荐以上代码结构，我通过GlobalProvider分享store。

Answer 1

你的减速器也应该是纯函数，让你的员工像这样行动：

动作

import Axios from "axios";

const VERIFY_CREDENTIALS ='VERIFY_CREDENTIALS';
const ERROR_CREDENTIALS='ERROR_CREDENTIALS';

export function VerifyCredentials(username,password)
{
  return Axios.post(url,{username,password})
    .then(x=>{
        {type :VERIFY_CREDENTIALS,payload:{userData:x.data, isVarified:true} }
    })
    .catch((err) => {type :ERROR_CREDENTIALS});
}

减速器

import { VERIFY_CREDENTIALS ,ERROR_CREDENTIALS} from "./Login_Action";

const initialState={
    userData:"",
    isVarified:false
}
const url='http://localhost:52016/api/values/';
export const  LoginReducer=(state=initialState,action)=>{
    switch (action.type) {
        case VERIFY_CREDENTIALS:
            return action.payload;
        case ERROR_CREDENTIALS:
            return state;
        default:
            return state;
    }
}

Answer 2

我安装了 -

npm install --save redux-thunk

还在 store.js 中添加以下代码 -

import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

export const  store=createStore(LoginReducer,applyMiddleware(thunk));

对我有帮助的网址 -

https://www.npmjs.com/package/redux-thunk

解决方案的功劳 -

Nilesh Patel's Comment

Answer 3

你的代码大错特错！！！

请注意以下所有内容。另请阅读文档 - 编写更好的代码

使用 react-redux 库 - 创建异步操作使用 redux-thunk

import   {Provider} from "react-redux"; // you need this
import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import { store } from "./GlobalStorage/store";

function App() {
  return (
    <div className="App">
      <Provider store={store}> 
         <Login/>
      </Provider>
    </div>
  );
}

export default App;

Login_Reducers.js

const initialState={
    userName:"",
    password:"",
    isVarified:false,
    loading:false,
    error:false,
}
export const  LoginReducer=(state=initialState,action)=>{
    switch (action.type) {
        case 'VERIFY_CREDENTIALS':
            // return new state 
            alert(action.payload)
            return {
              ...state,
              username:"John",
              password:'12345678'
            }
        case "VERIFY_CREDENTIALS_LOADING":
            return{
               ...state,
               loading:true,
            }
        case "VERIFY_CREDENTIALS_ERROR":
            return{
               ...state,
               error:true,
            }
        default:
            return state
    }
}

Login_Action.js

const VerifyCredentialsError = ()=>({type:"VERIFY_CREDENTIALS_ERROR"})
const VerifyCredentialsLoading = ()=>({type:"VERIFY_CREDENTIALS_LOADING"})
const VerifyCredentialsSuccess = (data)=>({type:"VERIFY_CREDENTIALS",payload:data})
export const RequestVerifyCredentials = ()=>{
    return(dispatch)=>{
       dispatch(VerifyCredentialsLoading())
       Axios.get(url)
           .then(x=>{
             alert(x.data);
             dispatch(VerifyCredentialsSuccess(x.data))
            })
            .catch(err => dispatch(VerifyCredentialsError()))
    }
}

登录.js

import {useEffect} from 'react'
import {useDispatch} from 'react-redux'
import {RequestVerifyCredentials} from 'Login_Action.js'
const Login = ()=>{
const dispatch = useDispatch()

useEffect(()=>{
  dispatch(RequestVerifyCredentials())
},[dispatch])

return(
   <h2>Login Component</h2>
)

}

react-redux 提供者文档：

https://react-redux.js.org/api/provider

react-redux钩子文档：

https://react-redux.js.org/api/hooks

redux-thunkgithub 仓库和文档：

https://github.com/reduxjs/redux-thunk