REDUX In REACT

App.js

import React, { Component } from "react";
import { connect } from "react-redux";
class App extends Component {
  render() {
    return (
      <>
        <h1>age {this.props.age}</h1>
        <button onClick={this.props.onAgeUp}>increment age</button>
        <button onClick={this.props.onAgeDown}>decrement age</button>
      </>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onAgeUp: () => dispatch({ type: "AGE_UP" }),
    onAgeDown: () => dispatch({ type: "AGE_DOWN" })
  };
};

const mapStateToProps = state => {
  return {
    age: state.age
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./store/reducer";

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

reducer.js

const initialState = {
  age: 21
};

const reducer = (state = initialState, action) => {
  const newState = { ...state };
  switch (action.type) {
    case "AGE_UP":
      newState.age++;
      break;
    case "AGE_DOWN":
      newState.age--;
      break;
    default:
      break;
  }
  return newState;
};

export default reducer;