Auth Reducer ve Actions kullanımı Giriş yapmış kullanıcıya göre Header gösterme (Redux)

 Reactın en zevkli konusu Reducer ve Actions kavramlarıdır. Kısaca actions işlemlerin yapıldığı alan reducer ise bu işlemler sonunda verilerin tutulduğu alandır.
    Not: Veri tabanına kayıt işlemi yapmak istersek actions kullanılır. Reducer da tarayıcıda gösterilecek veriler tutulur.

İlk olarak Type yazılır. Bu type actionda işleme tutulur. İşleme tutulan type da değişiklik olursa Reducer tarafından yakalanır. Ve değişiklikler state ye set edilir.

export const FETCH_USER = 'fetch_user';

actions/types dizini altına yazdım. Şimdi action/index e actions 'umuzu yazacağız.

export const fetchUser = () => async dispatch => {

const res = await axios.get('/api/current_user');

dispatch({ type: FETCH_USER, payload:res.data });

}

/api/current_user dan sisteme girişi yapmış kullanıcıyı alıyorum

app.get('/api/current_user', ( req, res) => {

res.send(req.user); //user services/passport da tanımlandı

api tarafıda böyle

Artık actions api ye geçip giriş yapmış kullanıcıyı alabiliyor. Sırada payload bilgisini reducer de yakalayıp state lere set etmeye geçeceğiz. Ardında Header componentini reducer 'a bağlayıp kullanıcının bağlı olmasına göre header içeriğinde değişikliler yapacağız.

reducer/authReducer

import { FETCH_USER } from '../actions/types';

export default function (state= null, action) {

// console.log(action);

switch (action.type) {

case FETCH_USER:

return action.payload || false ;

default:

return state;

}

}

FETCH_USER yakalandığında yukarıdaki reducer çalışacak. Şimdi combineReducer ' e bağlayalım;

import { combineReducers } from 'redux';

import authReducer from './authReducer';

export default combineReducers({

auth: authReducer

})

Artık reducerim kullanıma hazır Header componentinde connect ile bağlamam kaldı.

import { connect } from 'react-redux';

Kütüphanesi kullanacağım.

function mapStateProps ({ auth }) { //İndex reducer dan gelen Obje

return ( { auth }) //Kendi auth uma atadım es6 dan gelen kolaylık

}

export default connect(mapStateProps)(Header);

connect yapısı ile Header componentim ile combine Reducerımı bağladım artık this.state.auth nesnem var .

import React, { Component } from 'react';

import { connect } from 'react-redux';

import { Link } from 'react-router-dom';

class Header extends Component {

renderAuth(){

switch (this.props.auth) {

case null:

return console.log(this.props.auth)

case false:

return (

<li><a href="/auth/google">Login with Google </a> </li>

)

default:

return(

<li> <a href="/api/logout"> Log OUT </a> </li>

)

}

}

render(){

return (

<div>

<ul id="dropdown1" className="dropdown-content">

<li><a href="#!">one</a></li>

<li><a href="#!">two</a></li>

<li className="divider"></li>

<li><a href="#!">three</a></li>

</ul>

<nav>

<div className="nav-wrapper">

<Link

to= {this.props.auth ? '/articles' : '/' }

className="brand-logo">

A.Süha Işık

</Link>

<ul className="right hide-on-med-and-down">

<li><a href="/Cv">Cv</a></li>

<li><a href="/AboutMe">Hakkımda</a></li>

<li><a href="/ContactMe">Bana Ulaşın</a></li>

<li><a className="dropdown-trigger" href="#!" data-target="dropdown1">Yazılar<i className="material-icons right">arrow_drop_down</i></a></li>

{this.renderAuth()}

</ul>

</div>

</nav>

</div>

)

}

}

function mapStateProps ({ auth }) { //İndex reducer dan gelen Obje

return ( { auth }) //Kendi auth uma atadım es6 dan gelen kolaylık

}

export default connect(mapStateProps)(Header);

Header Componentimin tam hali

Şimdi sırada action mu tetiklemem lazım onun içinde App.js e gidecem.
Öncelikle connect bileşenim ile app.js bağlayacağım. Bu bağlama işlemini yaparken Actions umu kullanacağım. Daha sonra app componentinde actions a yazdığım fetchuser methodunu çağıracağım

import { connect } from 'react-redux';

import * as actions from '../actions'

Gerekli importları yapıyorum.

componentDidMount() {

this.props.fetchUser();

}

User ımı getiriyorum

export default connect(null,actions)(App);

connect ile bağlama işlemi