Реагировать: действие должно быть простым объектом

У меня ниже структура проекта -

У меня есть 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.

редуктор - это чистая функция, не может обрабатывать асинхронное поведение. вам нужно использовать промежуточное программное обеспечение для обработки любой асинхронной задачи (побочный эффект). npmjs.com/package/redux-thunk

— 23.12.2020 07:45

javascript reactjs redux react-redux reducers

23.12.2020 07:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

130

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

я установил -

npm install --save redux-thunk

Также добавлен ниже код в store.js -

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

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

URL, который мне помог -

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

Кредит для решения -

Комментарий Нилеша Пателя

23.12.2020 08:00

Ответ принят как подходящий

Также ваш редуктор должен быть чистой функцией и выполнять действия вашего персонала следующим образом:

Действие

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

23.12.2020 08:16

Вы очень ошибаетесь в своем коде!!!

Обратите внимание на все нижеследующее. Пожалуйста, также прочитайте документацию - для написания лучшего кода

используйте библиотеку 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()))
    }
}

Логин.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>
)

}