Ошибка: Вы не можете вызывать store.getState () во время выполнения редуктора (не проблема Dev Tools или logger) - PullRequest
0 голосов
/ 12 декабря 2018

Я пытался отключить Redux dev tools и logger, но это не проблема dev tools или logger.Попробовал изменить порядок промежуточного ПО и тоже не работает.

Действие

export const authUser = (userData) => dispatch => {
const dataQ = function getFormData(object) {
    const formData = new FormData();
    Object.keys(object).forEach(key => formData.append(key, object[key]));
    return formData;
}

const dataAuth = {
    wh_country_code : 'US',
    token : userData.accessToken,
    social : 'facebook'

}

dispatch({
    type: 'LOGIN_SUCCESSFULL',
    payload : userData
})

fetch('http://localhost/api/user/auth', {
    method: 'POST',
    body: dataQ(dataAuth)
  }).then( response => {

      if(response.status == 200) {
        console.log(response.status)

      } else {
    // POST to register user if user dont exist
        fetch('http://localhost/api/user/register/facebook', {
            method: 'POST',
            body : dataQ(dataReg)

        })
       }
   })}

Компонент

import React from 'react';
import PropTypes from 'prop-types'
import Facebook from 'react-facebook-login';
import Google from 'react-google-login';
import socialStyle from '../../css/Components/Account_public/Social.css';
import history from '../../history'
import store from '../../store'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { authUser } from '../../actions/authActions'

/*const googleStyle = {

background: `#db4437`,
marginTop: `20px`,
border: `1px solid #db4437`,
maxWidth: `165px`,
height: `45px`,
position: `relative`,
fontSize: `20px`,
fontWeight: `normal`,
lineHeight: `1.48`,
letterSpacing:` -0.5px`,
textAlign:` left`,
color: `#ffffff`,
top:`-114px`,
left:`24px`
}*/

class Social extends React.Component{
constructor() {
    super();
    this.state= {
        isLoggedIn: false,
        userID: '',
        name: '',
        email: '',
        picture: '',
        token : '',
        wh_country_code : 'US',
        social : 'facebook',
    }
    this.responseFacebook = this.responseFacebook.bind(this);
    this.responseGoogle = this.responseGoogle.bind(this);
}

responseFacebook  (response)  {
     // Split name that Facebook object returns into "first_name", and "last_name"
    var fullName = response.name;
    var index = fullName.indexOf(" ");
    var first_name = fullName.substr(0, index);
    var last_name = fullName.substr(index + 1);
    // Authentication (Login) data sent to API

    // Registration data sent to API
    const dataReg = {
        token : response.accessToken,
        wh_country_code : 'US',
        first_name: first_name,
        last_name: last_name,
        email : response.email,
    }

    this.props.authUser(response)
    // POST to authenticate user
    /* fetch('http://localhost/api/user/auth', {
    method: 'POST',
    body: dataQ(dataAuth)
  }).then( response => {
      if(response.status == 200) {

      } else {
        // POST to register user if user dont exist
        fetch('http://localhost/api/user/register/facebook', {
            method: 'POST',
            body : dataQ(dataReg)

        })
      }
  }) */

}


responseGoogle (response) {
    // Function to convert data from JSON to FormData
    const dataQ = function getFormData(object) {
        const formData = new FormData();
        Object.keys(object).forEach(key => formData.append(key, 
 object[key]));
        return formData;
    }
            // Register with google parameters
    const googleReg = {
        first_name : response.profileObj.givenName,
        last_name : response.profileObj.familyName,
        email : response.profileObj.email,
        token : response.accessToken,
        wh_country_code : 'US'
    }
    // Auth with google parameters
    const googleAuth =  {
        token : response.accessToken,
        wh_country_code : 'US',
        social: 'google'
    }


    fetch('http://localhost/api/user/auth', {
        method : 'POST',
        BODY : dataQ(googleAuth)
    }).then(response => {
        if(response.status == 200) {
            this.setState({
                isLoggedIn: true
            })


        } else {
            console.log(response)
            this.setState({
                isLoggedIn : false
            })
            fetch('http://localhost/api/user/register/google', {
                method : 'POST',
                body : dataQ(googleReg)
            })
        }
    })
}

logout() {
    fetch('http://localhost/api/user/logout', {
        method : "POST",
    })
    this.setState({
        isLoggedIn: false,
        accessToken : '',
    })
}

render(){
    var divstyle = {
        color: 'red',
        fontWeight: '600'
    }
    let fbContent;
    let googleContent;
    let dragica = '1'
    if(this.state.isLoggedIn) {
        fbContent = null;
    } else {
            fbContent = (
                <Facebook
                    appId="111232816261"
                    autoLoad={false}
                    fields="name,email,picture"
                    onClick={this.componentClicked}
                    callback={this.responseFacebook}
                    textButton="Facebook"
                    cssClass="facebook-btn"
                    />

            );
    }

    if(this.state.isLoggedIn) {
        googleContent = null;
    } else {
            googleContent = (
                <Google
                    clientId="426090696509-g9qgpjjrtf4b4d3tuqarslp3na4ehufp.apps.googleusercontent.com"
                    buttonText="Google"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseGoogle}
                    className="google-btn"
                />
            );
    }

    return(
        <div className="SocialLoginWrap">
                {fbContent}
                {googleContent}
        </div>
    );
}

}




Social.propTypes = {
authUser : PropTypes.func.isRequired
}

export default withRouter(connect(null, { authUser })(Social));

Редуктор

import history from '../history'
const initialState = {
isLoggedIn : false,
}
const authReducer = (state= initialState, action) => {
switch(action.type) {
    case 'LOGIN_SUCCESSFULL':
     history.push('/')
     return {
         state : true,
         payload : action.payload
     }

    case 'LOGIN_FAILED':
     alert('Failed login idiot')

    case 'LOGOUT': 
     history.push('/account')   
     return null
    default:
     return null
}
}


export default authReducer

Если у кого-либо есть какие-либо предложения, скажите, пожалуйста, я застрял в этой проблеме на несколько дней.Я пробовал много вещей, и та же ошибка выскакивает.Полное описание ошибки:

sdk.js:108 Uncaught Error: You may not call store.getState() while the 
reducer is executing. The reducer has already received the state as an 
 argument. Pass it down from the top reducer instead of reading it from the 
store.
    at Object.getState (redux.js:114)
    at Object.runComponentSelector [as run] (connectAdvanced.js:37)
    at Connect.componentWillReceiveProps (connectAdvanced.js:168)
    at callComponentWillReceiveProps (react-dom.development.js:12564)
    at updateClassInstance (react-dom.development.js:12774)
    at updateClassComponent (react-dom.development.js:14262)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17820)
    at workLoop (react-dom.development.js:17860)
    at renderRoot (react-dom.development.js:17946)
...