Redux 商店（returns 仅初始状态）未更新（操作非常好）

Question

身份验证完成后，我可以看到操作更新和 reducer 更新 - 但是 mapstatetoprops 不会对新的 reducer 状态做任何事情

商店在每次更新时都会记录相同的状态（初始状态）

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

应该调度和更新道具的 JS

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

减速器

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,
        isauthed: action.payload
      }
      break;
    case 'IsNotSignedIn':
      return {
        ...state,
        isauthed: action.payload
      }
      break;
    default: return state
  }
}

export default AuthReducer;

这是动作文件

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

Redux 商店

import { createStore } from 'redux';
import logger from 'redux-logger';
import { createEpicMiddleware } from 'redux-observable';
import {AllReducers} from './reducer/index';
//import rootEpic from './modules/rootEpic';

//const epicMiddleware = createEpicMiddleware(rootEpic);

const store = createStore(AllReducers);

store.subscribe(() => {
  console.log('storeupdated', store.getState())
});

export default store;

CombineReducers 函数

import {combineReducers} from 'redux'
import {AuthReducer} from './AuthReducer'
import {UserReducer} from './UserReducer'

export const AllReducers = combineReducers({
  Authed: AuthReducer 
  User:   UserReducer
})

Answer 1

您似乎在 'isSignedIn' 和 'IsSignedIn' 之间输入错误（第一个字母不同）

您可以通过使用在单独文件中声明的变量来避免这种情况。我喜欢将其称为 types.js 来表示操作类型：

// types.js
export const IS_SIGNED_IN = 'isSignedInOrEvenWhateverButYouBetterKeepAClearName'
// (same with all your types)

然后您可以在其他文件中导入此变量。你不会再有错别字了！

P.S：你可以在 redux 中找到所有这些想法 documentation

Redux 商店（returns 仅初始状态）未更新（操作非常好）

Redux Store (returns only initial state) not updating (Actions work perfectly fine)

typescript

reactjs

redux

redux-thunk

react-redux