Notes

app.js:
import React from 'react';
// import store from './store';
import { createStore } from 'redux'
import fetchingData from './reducers/fetchingDataReducer'
import { Provider } from 'react-redux'
import Dashboard from './components/Dashboard';

const store = createStore(fetchingData)
console.log("======store.getState()",store.getState())
store.subscribe(() => console.log('Look ma, Redux!!'))
export class App extends React.Component{
render(){
return (
<Provider store={store}>
<div>
<Dashboard />
</div>
</Provider>
);
}
}
export default App;
============================
search.js
import React, { Component } from 'react';
import LocationSearchInput from './LocationSearch';
import { connect } from 'react-redux';
import { initialData, searchedLocation } from '../actions/searchedLocation'
import { bindActionCreators } from 'redux'

export class SearchComponent extends Component {
constructor(props){
super(props);
console.log("props===",props)
this.state = {
toggleSeach: false,
showHistory: false,
address: ''
}
//this.onChange = (address) => this.setState({ address })
this.toggleSearchHistory = this.toggleSearchHistory.bind(this);
//this.handleChange = this.handleChange.bind(this);
}
toggleSearchHistory (){
this.setState(state => ({
toggleSeach: !state.toggleSeach
}));

}
// handleChange(event) {
// this.setState({address: event.target.value});
// console.log(this.state.address);
// }
getMapDetails = (data) => {
console.log("search js data ", data);
this.props.searchedLocation(data)
this.props.mapContent(data)
}


render() {
const inputProps = {
value: this.state.address,
onChange: this.onChange,
// onBlur: () => {
// console.log('blur!')
// },
type: 'search',
placeholder: 'Search Places...',
autoFocus: true,
}
return (
<React.Fragment>
<LocationSearchInput inputProps={inputProps} getMapDetails={this.getMapDetails} />
{/* <div className="form-group col-sm-12 col-md-8">
<input type="text" id="location" className="form-control" required value={this.state.address} onChange={this.handleChange}/>
<label className="form-control-placeholder" htmlFor="location">Search Location</label>
</div> */}
<div className="col-sm-12 col-md-8">
<button className="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse-search" aria-expanded="false" onClick={this.toggleSearchHistory}>{this.state.toggleSeach ? 'Hide Search History' : 'Show Search History'}</button>
<div className="collapse collapse-search" id="multiCollapseExample2">
<div className="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</React.Fragment>
);
}
}


const mapStateToProps = state => {
console.log("mapStateToProps====state===",state)
return { initialData: state };
};

const mapDispatchToProps = dispatch => {
return {
searchedLocation: () => dispatch({ type: 'SEARCHED_LOCATION', action:searchedLocation }),
}
}

// function mapDispatchToProps(dispatch) {
// return {
// dispatch,
// ...bindActionCreators({ searchedLocation }, dispatch)
// }
// }
// const mapDispatchToProps = dispatch => {
// return {updatesearchedLocation: searchedLocation}
// }

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

// export default SearchComponent;

==================================
reducer.js

const InitialData={
address: 'Chennai, Tamil Nadu, India',
selectedLat: '13.0826802',
selectedLng: '80.27071840000008'
}

const fetchingData = (state=InitialData, action) => {
console.log("action=========",action)

switch (action.type) {
case 'INITIAL_DATA':
return state = {
...InitialData
}
case 'SEARCHED_LOCATION':
return state = {
address: 'logesh',
selectedLat: '-1.2884',
selectedLng: '36.8233'
}
case 'SEARCHED_HISTORY':
return state={
searchHistory: [ ...state]
}
default:
return state
}
}

export default fetchingData
==============================
action.js
export function initialData(payload) {
return { type: "INITIAL_DATA", payload }
};
export function searchedLocation(payload) {
return { type: "SEARCHED_LOCATION", payload }
};
export function searchHistory(payload) {
return { type: "SEARCHED_HISTORY", payload }
};