IT技术 - react：动作必须是普通对象 - 吾爱随笔录

react：动作必须是普通对象

IT技术 javascript reactjs redux react-redux reducers

2021-05-07 07:02:44

我有以下项目结构 -

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

3个回答

此外，您的减速器应该是纯函数，并让您的员工采取如下行动：

行动

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

我安装了 -

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

信用解决方案 -

尼勒什帕特尔的评论

你的代码错了！！！

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

使用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
    }
}

登录_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()))
    }
}

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

}