<file_sep>import { CounterAction } from '../action/counter';

const INITIAL_STATE = {
    count: 0,
};

export function CounterReducer(state = INITIAL_STATE, action) {
    switch (action.type) {

        case CounterAction.INCREMENT_COUNTER:
            return Object.assign({}, state, { count: state.count + 1 });

        case CounterAction.DECREMENT_COUNTER:
            return Object.assign({}, state, { count: state.count - 1 });
            
        default:
            return state;
    }
}<file_sep>import React, { Component } from 'react';

import { connect } from 'react-redux';

import { CounterAction } from './store/action/counter';

class CounterComponent extends Component {

  componentWillReceiveProps(props) {
    console.log('props ', props)
  }
  
  render() {
    return (
      <div>
          Counter: {this.props.count}
          <p>
              <button onClick={this.props.increment}>Increment ++</button> <strong>|</strong> <button onClick={this.props.decrement}>Decrement --</button>
          </p>
      </div>
    );
  }
}

const mapStateToProps = state => {
    return {
        count: state.CounterReducer['count']
    }
}
  
  const mapDispatchToProps = dispatch => {
    return {
        increment: () => dispatch(CounterAction.increment()),
        decrement: () => dispatch(CounterAction.decrement())
    }
}
  
export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
<file_sep>import React, { Component } from 'react';
import './App.css';

class UserView extends Component {

    componentWillReceiveProps(nextProps) {
        if(nextProps.user.id == 44) {
            console.log('this ', this.props.user.name)
            console.log('next ', nextProps.user.name)
        }
        // console.log('componentWillReceiveProps ', nextProps)
    }

    componentDidMount() {
        console.log('this.props, ', this.props);
    }

    deleteFromChild = () => {
        this.props.delete(this.props.user);

    }

  render() {
    return (
        <div>   
          {this.props.user.name} 
          <button onClick={this.deleteFromChild}>Delete </button>
          <button>Edit </button>
        </div>
    );
  }
}

export default UserView;
<file_sep>import { createAction } from 'redux-actions';

export class GitAction {

    static GET_REPOS = 'GET_REPOS';
    static GET_REPOS_SUCCESS = 'GET_REPOS_SUCCESS';
    static GET_FOLLOWERS = 'GET_FOLLOWERS';
    static GET_FOLLOWERS_SUCCESS = 'GET_FOLLOWERS_SUCCESS';

    static getRepos(uid) {
        console.log('1', uid)
        return {
            type: GitAction.GET_REPOS,
            payload: uid
        };
    }

    static getFollowers(uid) {
        return {
            type: GitAction.GET_FOLLOWERS,
            payload: uid
        };
    }

    static getRepoSuccessful(data) {
        // console.log('repo success', data);
        return {
            type: GitAction.GET_REPOS_SUCCESS,
            payload: data
        };
    }

    static getFollowersSuccessful(data) {
        console.log('follower success', data);
        return {
            type: GitAction.GET_FOLLOWERS_SUCCESS,
            payload: data
        };
    }
}<file_sep>import { GitAction } from '../action/github';

const INITIAL_STATE = {
   loader: false,
   repo: null,
   followers: null
};

export function GithubReducer(state = INITIAL_STATE, action) {
    switch (action.type) {

        case GitAction.GET_REPOS:
            console.log('2 reducer', )
            return {...state, loader: true};

        case GitAction.GET_REPOS_SUCCESS:
            return Object.assign({}, state, { loader: false , repo: action.payload });

        // case GitAction.GET_FOLLOWERS:
        //     return Object.assign({}, state, { loader: true });

        default:
            return state;
    }
}<file_sep>import { Observable } from 'rxjs';
import { GitAction } from '../action/github';

export class GitEpic {

    static getRepoData(action$) {
        console.log(action$);
        return action$.ofType(GitAction.GET_REPOS)
            .switchMap(({payload}) => {
                console.log('3 epic: payload', payload);
                return Observable.ajax(`https://api.github.com/users/${payload}/repos`)
                    .pluck("response")
                    .map((jsonData) => {
                        console.log('4 got data', jsonData);
                        // console.log("jsondata ==>/ repos ", jsonData)
                        // return Observable.of(GitAction.getRepoSuccessful(jsonData));
                        return {
                            type: GitAction.GET_REPOS_SUCCESS,
                            payload: jsonData
                        };
                    });
            });
    }

    static getFollowersData(action$) {
        console.log(action$);

        return action$.ofType(GitAction.GET_REPOS_SUCCESS)
            .mergeMap(() => {
                return Observable.ajax(`https://api.github.com/users/${action$.payload}/followers`)
                    .pluck("response")
                    .switchMap((jsonData) => {
                        console.log('5555555555555, got data', jsonData)
                        // console.log("jsondata ==> followers ", jsonData)
                        return Observable.of(GitAction.getFollowersSuccessful(jsonData));
                    });
            });
    }

}<file_sep>function sum(a, b) {
    return a + b;
}

function multiply(a, b) {
    return a * b;
}

function sub(a, b) {
    return a / b;
}

export {
    multiply,
    sub
};

export default sum;<file_sep>import React, { Component } from 'react';

class TodoInput extends Component {

  state = {
      appName: 'My App Name',
      task: '',
      mode: 'Add'
  }

  constructor(props) {
    super(props);
    // alert('rendring todoInput')
    // setTimeout(() => {
    //     console.log('changing app name')
    //     this.setState({appName: 'Changed......via state'})
    // }, 2000)
    // this.onChangeHandler = this.onChangeHandler.bind(this);
  }

//   inputbox;
  onChangeHandler = (ev) => {
        console.log(ev.target.name);
        console.log(ev.target.value);
        // this.inputbox = ev.target.value;
        // this.setState({'task': ev.target.value});
        this.setState({[ev.target.name]: ev.target.value});
        
  }


  componentWillReceiveProps(nextProps) {
    if(nextProps.updateUser){
        this.setState({mode: 'Update'})
    } else {
        this.setState({mode: 'Add'})
    }
  }

  submitHandler = (ev) => {
      if(this.state.mode == 'Add') {
        // addd
      } else {
        // update
      }
      console.log(ev)
      this.props.submit({
          id: Date.now(),
          name: this.state.task
      })
      this.setState({task: ''});
      ev.preventDefault();

  }


  render() {
    return (
      <div>
        <h1>Todo Input Component - {this.state.appName}</h1>

        <form onSubmit={this.submitHandler}>
            <div>
                <input type="text" name="task" value={this.state.task} onChange={this.onChangeHandler}/>
                <input type="submit" name="add" value={this.state.mode}/>
            </div>

        </form>
      </div>
    );

  }
}

export default TodoInput;
<file_sep>import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import UserView from './UserView';
import TodoInput from './TodoInput';

import Sample from './Sample';

class App extends Component {

  state = {
    users: [{id: 1, name: 'user1'}, {id: 2, name: 'user2'}, {id: 3, name: 'user3'}],
    updateUser: null,
    childText: 'Sample 1'
  }


  deleteItem = (user) => {
    console.log('App.js delete item...', user.id);
    const abc = [...this.state.users];
    abc[1] = {id: 44, name: 'user44'};

    this.setState({users: abc});
  }

  updateItem = () => {
    console.log('App.js update item...');
  }

  addUser = (obj) => {
    let _user = [...this.state.users];
    _user.push(obj);
    this.setState({users: _user});

  }

  changeParentText = () => {
    this.setState({childText: 'Parent Text Changes' + Date.now()});
  }

  updateParent = (obj) => {
    console.log('Child text Changed', obj);
    this.setState({childText: obj.text})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
        <TodoInput submit={this.addUser} user={this.state.updateUser}/>
        </div>
        <div>
          {
            this.state.users.map(val => {
              return(
                <UserView user={val} delete={this.deleteItem} update={this.updateItem} />
              );
            })
          }
        </div>
        
        <p>
          <button onClick={this.changeParentText}> chnage the text</button>
        </p>

        <Sample text={this.state.childText} output={this.updateParent} />


      </div>
    );
  }
}

export default App;
