首页 > 解决方案 > React:动作必须是普通对象

问题描述

我有以下项目结构 -

在此处输入图像描述

我有 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;

我收到以下错误:-

在此处输入图像描述

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

还请建议是否推荐上述代码结构,或者不推荐我分享store的地方GlobalProvider

标签: javascriptreactjsreduxreact-reduxreducers

解决方案


我安装了 -

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

信用解决方案 -

尼莱什·帕特尔的评论


推荐阅读