はReduxの、ログアウトのアクションがコンポーネント

Question

私はこれを持っているに更新されません、反応します。

私はチュートリアルに従ってこれを行う反応を還元する方法を学びました。

なぜ機能しないのですか？

authReducers.js：

import { 
    AUTHENTICATED, 
    UNAUTHENTICATED, 
    AUTHENTICATION_ERROR 
} from "../actions/actionTypes"; 

export default function(state = {}, action) { 
    switch (action.type) { 
    case AUTHENTICATED: 
     return { ...state, authenticated: true }; 

    case UNAUTHENTICATED: 
     return { ...state, authenticated: false }; 

    default: 
     return state; 
    } 
} 

authActions.js：

import * as actionTypes from "./actionTypes"; 

export function loginAction(history) { 
    return async dispatch => { 
    const timeout = ms => new Promise(res => setTimeout(res, ms)); 
    await timeout(1000); 
    .... 
    dispatch({ type: actionTypes.AUTHENTICATED }); 
    }; 
} 

export function logoutAction(history) { 
    ... 
    return { type: actionTypes.UNAUTHENTICATED }; 
} 

Answer 1

編集

あなたはconnect()にlogoutActionを渡していなかった、あなたは、cを持っている必要がありますそれはthis.props.logoutAction()

あなたのナビゲーションバーには、次のようになりますalled：

import React, { Component } from "react"; 
import { connect } from "react-redux"; 
import { Link, NavLink } from "react-router-dom"; 

import { logoutAction } from "./actions/authActions"; 

class Navbar extends Component { 

    onLogout =() => { 
    this.props.logoutAction(this.props.history) 
    } 

    render() { 
    if (this.props.authenticated) { 
     return (
     <div> 
      <div> 
      <Link to="/">Home</Link> 
      {" | "} 
      <NavLink to="/about">About</NavLink> 
      {" | "} 
      <NavLink to="/faq">Faq</NavLink> 
      {" | "} 
      <button onClick={this.onLogout}> 
       Sign out 
      </button> 
      </div> 
      <br /> 
      <br /> 
     </div> 
    ); 
    } 
    return (
     <div> 
     <NavLink to="/login">Log in</NavLink> 
     <br /> 
     <br /> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = state => ({ 
    authenticated: state.auth.authenticated 
}); 

export default connect(mapStateToProps, { 
    logoutAction 
})(Navbar);