hadnazzar

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  reducers,
  composeEnhancer(applyMiddleware(thunk)),
);

hadnazzar

import { combineReducers } from 'redux'
import profile from './profile'

export default combineReducers({
  profile,
})

hadnazzar

import {
  EMAIL_CHANGED
} from '../actions/profile';

const INITIAL_STATE = {
  email: 'test@redux.com'
}

const profileReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {

hadnazzar

export const EMAIL_CHANGED = 'email_changed';

export const changeEmail = (email) => ({
  type: EMAIL_CHANGED,
  email
})

hadnazzar

import React from 'react';
import '../App.css';
import {connect} from "react-redux";
import { bindActionCreators } from 'redux';
import { changeEmail } from '../actions'; 

const Home = ({email, changeEmail}) => {
  return (
      <div className="App">
        <header className="App-header">

hadnazzar

git branch | grep -v "master\|develop" | xargs git branch -D

hadnazzar

git branch | grep -v "master\|develop" | xargs git branch -D

hadnazzar

import React, { useState } from "react";
import ReactDOM from "react-dom";

const AppWithHooks = () => {
  // count = state
  // setCount = setState
  // 0 = initial count state value
  const [count, setCount] = useState(0);

  return (

hadnazzar

class AppWithClass extends React.Component{
  constructor(props){
    super(props)
    this.state={
      count: 0,
    }
  }
  render(){
    const {count} = this.state;
    return(

hadnazzar

const AppWithHooks = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Hadnazzar');
  return (
    <div className="App">
      <h1>Hello React with Hooks</h1>
      <h2>You clicked {count} times!</h2>
      <h2>Hello {name}</h2>
      
      <button onClick={() => setCount(count - 1)}>Decrement</button>