Question

我希望在多个容器中检查我的firebase UI身份验证，并在身份验证完成后重定向到主页面。

验证完成后，我可以看到更新操作和reducer更新 - 但是mapstatetoprops对新的reducer状态没有任何作用

收到道具并基于该呈现的登录页

＆＃13;

import React from 'react';
import { bindActionCreators } from 'redux'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { Redirect } from 'react-router-dom'
import firebase from 'firebase';
import { connect } from 'react-redux';
import { signIn, signOut } from '../reducer/actions'
import { auth } from '../firebase'

class LoginPage extends React.PureComponent {

  // Configure FirebaseUI.
  uiConfig = {'FirebaseUI Config'}

  componentDidMount = () => {

    auth.onAuthStateChanged((user) => { // gets user object on authentication
      console.log('OnAuthStateChanged', user)
      console.log('Check If Props Change in AuthChange', this.props.isauthed)

      if (user) {
        this.props.signIn(user)
      } else {
        this.props.signOut(user)
      }
    });
  }

  render() {
    console.log('Check If Props Change in Render', this.props.isauthed)
    if (!this.props.isauthed) {
      return (

        <div>
          <h1>My App</h1>
          <p>Please sign-in:</p>
          <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()} />

        </div>
      );
    }
    return (
      <Redirect to='/' />
    )
  }
}

export default (LoginPage);

＆＃13;

应该派遣和更新道具的JS

＆＃13;

import { connect } from 'react-redux';
import { signIn, signOut } from '../reducer/actions'
import { bindActionCreators } from 'redux'
import  LoginPage  from './LoginPage';



const mapStateToProps = (state) => {
    console.log('LOGINmapstatetoprops', state.Authed)
    return {
      isauthed: state.Authed.isauthed,
    }
  }
  const mapDispatchToProps = (dispatch) => {
    console.log('LOGINmapDISPATCHoprops')
    return bindActionCreators({signIn,signOut},dispatch)
    
  }
  
  
  export default connect(mapStateToProps,mapDispatchToProps)(LoginPage);

＆＃13;

减速机

＆＃13;

import LoginPage from '../components/LoginPage';
import firebase from 'firebase';

const initialState = {
  isauthed: false,
  error: ''
}


const AuthReducer = (state = initialState, action) => {
  console.log('this is an action',action)
  switch (action.type) {
    case 'IsSignedIn':
      return state = [
        ...state,
      {
        isauthed: action.payload
      }
    ]
      break;

    case 'IsNotSignedIn':
      return state= [
        ...state,{
        isauthed: action.payload
      }]
      break;
    default: return state
  }
}

export default AuthReducer;

＆＃13;

这是动作文件

＆＃13;

export const signIn = (user) => {
    console.log('this is from actions',user)
    return {
        type: 'isSignedIn',
        payload: true
    }
}

export const signOut = (user) => {
    console.log(user)
    return {
        type: 'isNotSignedIn',
        payload: false
    }
}

＆＃13;

Mapstatetoprops闲置的原因是什么？

我不认为像这样的简单场景需要componentwillreceiveprops方法

Answer 1

在reducer中存在问题，你应该返回一个对象而不是一个数组，改为：

case 'IsSignedIn':
  return {
    ...state,
    isauthed: action.payload
}

mapStateToProps没有执行

1 个答案: