React Context API Example

Merhaba,

Bu yazimda konuu daha iyi anlamak icin bir react context api ornegi daha yapacagim. 

Context Api 'in amaci datayi her yerden ulasabilir kilmakti (componentlar arasinda tek tek tasimak uzun bir is cunku)

Bu ornegimizde bir butonumuz olacak. Bu butona basilinca kurbaga sesi cikaracak ve tekrar basinca sessiz olacak. Bunun icin bir context yazalim.

context.js

import React from 'react';
const FrogContext = React.createContext();
const reducer = (state, action) => {
	if(action.type == "TOGGLE"){
		return {...state, isAFrog : !state.isAFrog};
	}
}
export class FrogProvider extends Component {
state = {
	isAFrog : false,
	dispatch: action => {
		this.setState(state => reducer(state, action));
	}
};
render() {
 return (
	{this.props.children}
		)
	}
}
const FrogConsumer = FrogContext.Consumer;
export default FrogConsumer;

Burada gordugumuz gibi dispacthde reducer'i cagirdik. Bunu tetiklemek kaldi simdi de.

dispatch cagrildiginda state icindeki isAFrog degerini degistiriyoruz.

Simdi componentimize gelelim:

import React, { Component } from 'react'

import FrogConsumer from '../context';

export default class frogs extends Component {

    render() {

        return (

           <FrogConsumer>

               {({isAFrog, dispatch}) => {

                   return (

                       <div>

                           <div>{isAFrog ? "🐸 croak" : "...silence..."}</div>

                           <button onClick={ e=> dispatch({type: "TOGGLE"})}>

                               Change

                           </button>

                       </div>

                   )

               }}

           </FrogConsumer>

        )

    }

}

Butona tikladiktan sonra ise asagidaki gibi olacak