反应:动作必须是普通对象 [英] React : Action Must Be Plain Object

问题描述

我有以下项目结构 -

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

从 'react' 导入 Reactconst GlobalContext=React.createContext();const GlobalProvider=GlobalContext.Provider;const GlobalConsumer=GlobalContext.Consumer;出口 {GlobalProvider,GlobalConsumer}

LoginReducers/Login_Action.js 使用以下代码 -

const VERIFY_CREDENTIALS ='VERIFY_CREDENTIALS'导出函数 VerifyCredentials(){返回{类型:VERIFY_CREDENTIALS}}

LoginReducers/Login_Reducers.js 与以下代码 -

从axios"导入Axios；import { VerifyCredentials } from "./Login_Action";常量初始状态={用户名:"",密码:"",isVarified:false}const url='http://localhost:52016/api/values/';export const LoginReducer=(state=initialState,action)=>{开关(动作.类型){案例VERIFY_CREDENTIALS":axios.get(url).then(x=>{警报(x.data)；})默认:休息;}}

GlobalStorage/store.js 与以下代码 -

import { createStore } from 'redux';import { LoginReducer } from "../Components/LoginReducers/Login_Reducers";export const store=createStore(LoginReducer);

具有以下代码的 App.js -

从'./logo.svg'导入logo；导入'./App.css';从'./Components/Login'导入登录；import { store } from "./GlobalStorage/store";从./GlobalStore"导入 {GlobalProvider,GlobalConsumer}；功能应用(){返回 (
<GlobalProvider value={store}><登录></登录></GlobalProvider>
);}导出默认应用程序；

我收到以下错误:-

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

还请建议我是否通过 GlobalProvider 共享 store 的地方推荐上述代码结构.

解决方案

此外，你的 reducer 应该是纯函数，并让你的员工采取这样的行动:

行动

从axios"导入Axios；const VERIFY_CREDENTIALS ='VERIFY_CREDENTIALS';const ERROR_CREDENTIALS='ERROR_CREDENTIALS';导出函数 VerifyCredentials(username,password){return axios.post(url,{用户名,密码}).then(x=>{{type :VERIFY_CREDENTIALS,payload:{userData:x.data, isVarified:true} }}).catch((err) => {type :ERROR_CREDENTIALS});}

减速器

import { VERIFY_CREDENTIALS ,ERROR_CREDENTIALS} from "./Login_Action";常量初始状态={用户数据:"，isVarified:false}const url='http://localhost:52016/api/values/';export const LoginReducer=(state=initialState,action)=>{开关(动作.类型){案例 VERIFY_CREDENTIALS:返回 action.payload;案例 ERROR_CREDENTIALS:返回状态；默认:返回状态；}}

I have below project structure -

I have GlobalStore.js where I have below code:-

import React from 'react'

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


export  {GlobalProvider,GlobalConsumer}

LoginReducers/Login_Action.js with below code -

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

LoginReducers/Login_Reducers.js with below code -

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 with below code -

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

export const  store=createStore(LoginReducer);

App.js with below code -

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;

I am getting below error:-

Please suggest what changes can be made in order to resolve this error?

Also please suggest if above code structure is recommended or not where I am sharing store through GlobalProvider.

解决方案

Also your reducer should be pure function and do your staff on action like this :

Action

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});
}

Reducer

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

这篇关于反应:动作必须是普通对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！