React, Readux, React-Redux, Redux-Thunk краткая шпаргалка

import React from "react";
import {render} from "react-dom";
import {createStore, combineReducers, applyMiddleware} from "redux";
import thunk from "redux-thunk";
import {Provider, connect} from "react-redux";

const couterUpActionCreator = value => {
  return {
    type: "COUNTER_UP",
    value: value
  };
};

const counterDownActionCreator = value => {
  return {
    type: "COUNTER_DOWN",
    value: value
  };
};

const counterDownAsyncActionCreator = value => {
  return dispatch => {
    setTimeout(() => {
      dispatch(counterDownActionCreator(value));
    }, 1000);
  };
};

const countReducer = (state = 0, action) => {
  switch (action.type) {
    case "COUNTER_UP": return state + action.value;
    case "COUNTER_DOWN": return state - action.value;
    default: return state;
  }
};

const counterReducer = combineReducers({
  count: countReducer
});

const rootReducer = combineReducers({
  counter: counterReducer
});

const initialState = {
  counter: {
    count: 0
  }
};

const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

store.subscribe(() => {
  console.log(store.getState());
});

class Counter extends React.Component {
  styles = {
    fontFamily: "sans-serif",
    textAlign: "center"
  }
  constructor (props) {
    super(props);
  }
  componentWillMount () {
    console.log("Component Will Mount");
  }
  render () {
    console.log('Render');
    return (
      <div style={this.styles}>
        <div>{this.props.propsFromApp}</div>
        <br />
        <div onClick={this.handleUpClick}>^</div>
        <div>{this.props.count}</div>
        <div onClick={this.handleDownClick}>v</div>
      </div>
    );
  }
  componentDidMount () {
    console.log("Component Did Mount");
  }
  componentWillReceiveProps (nextProps) {
    console.log("Component Will Recieve Props");
  }
  shouldComponentUpdate (nextProps, nextState) {
    console.log("Should Component Update");
    if (this.props.propsFromApp !== nextProps) {
      return true;
    } else {
      return false;
    }
  }
  componentWillUpdate (nextProps, nextState) {
    console.log("Component Will Update");
  }
  componentDidUpdate (prevProps, prevState) {
    console.log("Component Did Update");
  }
  componentWillUnmount () {
    console.log("Component Wiil Unmount");
  }
  handleUpClick = () => {
    this.props.counterUp();
  }
  handleDownClick = () => {
    this.props.counterDown();
  }
}

const mapStateToProps = state => {
  return {
    count: state.counter.count
  };
};

const mapDispatchToProps = dispatch => {
  return {
    counterUp: () => {
      dispatch(couterUpActionCreator(1));
    },
    counterDown: () => {
      dispatch(counterDownAsyncActionCreator(1));
    }
  };
};

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      propsFromApp: 0
    };
  }
  render () {
    return (
      <div>
        <div onClick={this.handleClick}>UPDATE STATE AND PROPS</div>
        <ConnectedCounter propsFromApp={this.state.propsFromApp} />
      </div>
    );
  }
  handleClick = () => {
    this.setState(
      Object.assign(
        {},
        this.state,
        {
          propsFromApp: this.state.propsFromApp + 1
        }
      )
    );
  }
}

render(<Provider store={store}><App /></Provider>, document.getElementById("root"));