反应：行动必须是简单的 Object

Question

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 .

Answer 1

I installed -

npm install --save redux-thunk

Also added below code in store.js -

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

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

Url which helped me -

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

Credit For Solution -

Nilesh Patel's Comment

Answer 2

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

Answer 3

You are very wrong in your code !!!

Please note all of the following. Please also read the documentation - for write better code

use react-redux library - and for create async actions use 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()))
    }
}

Login.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 Provider DOCS:

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

react-redux Hook DOCS:

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

redux-thunk github repository and docs:

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