는 돌아 오는, 로그 아웃 작업은 구성 요소

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

편집

당신은 logoutActionconnect()에 당신이 C가 있어야 전달되지 않았다 그것은 this.props.logoutAction()

귀하의 Navbar의는 다음과 같이한다 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);