App.js

import React, { Component } from 'react';

import Sidebar from '../Sidebar/Sidebar';
import GoogleMap from '../GoogleMaps/GoogleMap';

class App extends Component {
  render() {
    return (
      <div>
        <Sidebar />
        <GoogleMap />
      </div>
    );
  }
}

export default App;

GoogleMap.js

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
 
export class GoogleMap extends Component {

  state = {
    selectedPlace: { name: 'Lugarsito' }
  }

  onMarkerClick = () => {
    console.log('marker');
  }

  onInfoWindowClose() {
    console.log('info window');
  }

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

  componentWillUpdate(props) {
    console.log(props)
  }

  render() {
    return (
      <Map 
        google={this.props.google} 
        initialCenter={{
          lat: 40.854885,
          lng: -88.081807
        }}
        zoom={14}
      >
 
        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />
 
        <InfoWindow onClose={this.onInfoWindowClose}>
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
        </InfoWindow>
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: 'AIzaSyCkZpRQTgpvT7DN5sbth6-GRQncJ9nSiKI',
  version: '3.30',
  libraries: ['geometry', 'drawing', 'places']
})(GoogleMap)

root.js

export const initialState = {
  user: {
    isLogging: 0,
    isLogout: 0,
    isLogged: 0
  },
  data: {
    projects: []
  }
};

const reducers = {
  user: function(state = initialState.user, action) {
    switch (action.type) {
      case 'LOGGING':
      return { isLogged: 0, isLogging: 1, isLogout: 0 };

      case 'LOGGED':
      return { isLogged: 1, isLogging: 0, isLogout: 0 };

      case 'LOGOUT':
      return { isLogged: 0, isLogging: 0, isLogout: 1 };

      case 'WILL_LOGOUT':
      return { isLogged: 0, isLogging: 0, isLogout: 0, willLogout: 1 };

      case 'LOGOFF': 
      return { isLogged: 0, isLogging: 0, isLogout: 0 };

      default:
      return state;
    }
  },
  data: function (state = initialState.data, action) {
    switch (action.type) {
      default:
      return state;
    }
  }
}

export default reducers;

Sidebar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import arrow from './arrow.png';
import './Sidebar.css';

class Sidebar extends Component {

  state = {
    isOpen: this.props.isOpen,
  }
  
  handleToggle = (props) => {
    // abro y cierro sidebar
    this.sidebarEl.style.left = this.state.isOpen ? "-25vw" : "0vw";
    this.setState({ isOpen: !this.state.isOpen });

    this.props.dispatch({
      type:'isOpen',
      payload: {
        isOpen: this.state.isOpen,
      }
    });

  }

  render() {
    return(
      <div>
        <div
          className="Sidebar"
          ref={(el) => this.sidebarEl = el}
        >
          <a 
            className="closebtn"  // boton cerrar barra
            onClick={this.handleToggle}
          > &times;</a>

          {this.props.children}

        </div>
        <img src={arrow} id="arrow" alt="" onClick={this.handleToggle}/>
      </div>
    )
  }
}

function mapStateToProps(state, props){
  return{
    isOpen: state.isOpen,
  }
}

export default connect(mapStateToProps)(Sidebar);

store.js

import { applyMiddleware, createStore, combineReducers } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer, { initialState } from '../reducers/root';

export default function configStore(history) {
  let middleware = [thunk];
  
  // if (__DEV__) {
  middleware = [...middleware, logger];
  // }

  const reducer = combineReducers({ ...rootReducer });

  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middleware)
  );
}