Saya memiliki struktur proyek di bawah ini -

enter image description here

Saya memiliki GlobalStore.js di mana saya memiliki kode di bawah ini:-

import React from 'react'

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


export  {GlobalProvider,GlobalConsumer}

LoginReducers/Login_Action.js dengan kode di bawah ini -

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

LoginReducers/Login_Reducers.js dengan kode di bawah ini -

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 dengan kode di bawah ini -

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

export const  store=createStore(LoginReducer);

App.js dengan kode di bawah ini -

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;

Saya mendapatkan kesalahan di bawah ini:-

enter image description here

Harap sarankan perubahan apa yang dapat dilakukan untuk mengatasi kesalahan ini?

Juga tolong sarankan jika struktur kode di atas direkomendasikan atau tidak di mana saya membagikan store melalui GlobalProvider.

1
C Sharper 23 Desember 2020, 09:26

3 jawaban

Jawaban Terbaik

Peredam Anda juga harus berfungsi murni dan melakukan tindakan staf Anda seperti ini:

Tindakan

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

Peredam

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;
    }
}
1
b3hr4d 23 Desember 2020, 07:22

Saya memasang -

npm install --save redux-thunk

Juga ditambahkan kode di bawah ini di store.js -

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

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

Url yang membantu saya -

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

Kredit Untuk Solusi -

Komentar Nilesh Patel

1
C Sharper 23 Desember 2020, 07:00

Anda sangat salah dalam kode Anda !!!

Harap perhatikan semua hal berikut. Silakan baca juga dokumentasinya - untuk menulis kode yang lebih baik

Gunakan pustaka react-redux - dan untuk membuat tindakan asinkron gunakan 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 DOCS Penyedia:

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

react-redux Kaitkan DOKUMEN:

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

redux-thunk repositori dan dokumen github:

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

1
Mahdi zoraghi 23 Desember 2020, 07:59