提问者:小点点

ReactJS操作必须是普通对象。 为异步操作使用自定义中间件


我使用的是ReactJS。 我通过在app.js中获取登录的用户信息来传递道具。 但是我得到了如下的错误。 我哪里犯错了。

我已经研究了几天了。 他以前在工作。 我找不到哪里出错了。 你能帮我吗?

文件的内容如下

export const USER_INFO = "USER_INFO";

export function userAction(newValue) {
   return {
     type: USER_INFO,
     payload: {
       profile: newValue
     }
   };
  }
 export function getUserInfo() {
   return async dispatch => {
     await fetch(`${process.env.REACT_APP_APISERVER}/api/account/me`, {
            headers: {
       Authorization: `Bearer ${localStorage.getItem("id_token")}`,
       "Content-Type": "application/json"
     }
   })
    .then(function(response) {
      return response.json();
    })
    .then(function(jsonData) {
      dispatch(userAction(jsonData));

      //console.log(jsonData)
      return JSON.stringify(jsonData);
    })
    .then(function(jsonStr) {
      //console.log(jsonStr)
    });
   }
 }

文件的内容如下

 import React, { Component } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import {updateCustomer } from "../src/components/helpers/actions/customerActions";
 import { getUserInfo } from "../src/components/helpers/actions/userAction";
 import { connect } from "react-redux";
 import './scss/style.scss';
 import AuthService from "./components/helpers/AuthService";

 const loading = (
   <div className="pt-3 text-center">
   <div className="sk-spinner sk-spinner-pulse"></div>
   </div>
 );

 const TheLayout = React.lazy(() => import('./containers/TheLayout'));
 const Login = React.lazy(() => import('./views/pages/login/Login'));
 const Register = React.lazy(() => import('./views/pages/register/Register'));
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'));
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'));
 class App extends Component {
 constructor(props) {
    super(props);
   this.Auth = new AuthService();
 }
 componentDidMount() {
   this.props.onUpdateCustomer({id: "-1", customerKey: "-1", userKey: "-1"});
   if (this.Auth.loggedIn() === true) {
     this.props.onGetUserInfo();
   }
 }
   render() {
     return (
      <BrowserRouter>
       <React.Suspense fallback={loading}>
        <Switch>
         <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
          <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
         <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
         <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
         <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
       </Switch>
     </React.Suspense>
    </BrowserRouter>
    );
   }
 }
 const mapStateToProps = (state) => {
   return state;
 };
 const mapDispatchToProps = {
   onUpdateCustomer: updateCustomer,
   onGetUserInfo: getUserInfo
 };
 export default connect(mapStateToProps, mapDispatchToProps) (App );

index.js

 import 'react-app-polyfill/ie11'; // For IE 11 support
 import 'react-app-polyfill/stable';
 import './polyfill'
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';

 import { icons } from './assets/icons'

 import store from './store'

 import { transitions, positions, Provider as AlertProvider } from 'react-alert'
 import AlertTemplate from 'react-alert-template-basic'
 import { Provider } from 'react-redux';
 import ReactNotification from 'react-notifications-component';
 import 'react-notifications-component/dist/theme.css'
 import {applyMiddleware, combineReducers, compose, createStore} from "redux";
 import customerReducer from "./components/helpers/reducers/customerReducer";
 import userReducer from "./components/helpers/reducers/userReducer";
 import appointmentsReducer from "./components/helpers/reducers/appointmenstReducer";
 import thunk from "redux-thunk";



 React.icons = icons;


 const options = {
   position: positions.BOTTOM_RIGHT,
   timeout: 5000,
   offset: '1px',
   transition: transitions.SCALE,
 };



 const rootReducers = combineReducers({
   customerInfo: customerReducer,
   account_profile: userReducer,
   appointmentsList: appointmentsReducer
 });
 const allEnhancers = compose(
   applyMiddleware(thunk)
 );
 const store2 = createStore(
   rootReducers,
   allEnhancers
 );
 ReactDOM.render(
   <Provider store={store2}>

   <Provider store={store}>
     <AlertProvider template={AlertTemplate} {...options}>

       <ReactNotification/>
      <App/>

       </AlertProvider>
     </Provider>
   </Provider>,
   document.getElementById('root')
 );

 serviceWorker.unregister();

store.js

 import {createStore} from 'redux'
 const initialState = {
   sidebarShow: 'responsive'
 };
 const changeState = (state = initialState, { type, ...rest }) => {
   switch (type) {
     case 'set':
       return {...state, ...rest };
     default:
       return state
   }
 };
 const store = createStore(changeState);
 export default store

共1个答案

匿名用户

您可以使用redux中间件。 尝试redux-thunk

相关问题