title: How to dynamically update a search term with React/Redux/Axios?
body: <p>I'm building a small itunes application to fetch data from the Itunes api. I'm trying to implement the searchbar to make a relevant fetch to the server but I can't seem to figure out the correct props passed down from the Redux state. Since it is a small app I have used just the main App.js and index.js instead of separate folders for actions and reducers. My main App.js is as below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Navbar from './components/Navbar';
  import Results from './components/Results';
  import ToggleLayout from './components/ToggleLayout';
  import AdditionalPages from './components/AdditionalPages';
  import axios from 'axios';
  import { connect } from 'react-redux';
  
  const PATH_BASE = 'https://itunes.apple.com/search';
  const PATH_TERM = 'term=';
  const COUNTRY = 'country=es';
  const ALBUMS = 'entity=album';
  const LIMIT = 'limit=60';  
  
  class App extends Component {
    constructor(props){
      super(props);
      }
    }
  
    render() {
      return (
         &lt;div&gt;
            &lt;Navbar
              searchTerm={this.props.searchItunes.searchTerm}
              onSearchChange={(e) =&gt; this.props.onSearchChange(e.target.value)}
              fetchITunesAlbums={(e) =&gt; this.props.fetchITunesAlbums(e)}
            /&gt; 
            { this.props.searchItunes.itunes &amp;&amp;
                &lt;Results itunes={this.props.searchItunes.itunes} grid={this.props.toggle.grid} additionalPages={this.props.toggle.additionalPages} fetchMorePages={this.fetchMorePages}/&gt;
            }
  
            { this.props.toggle.additionalPages &amp;&amp;
                &lt;AdditionalPages itunes={this.props.searchItunes.itunes} grid={this.props.toggle.grid}/&gt;
            }
  
            &lt;ToggleLayout
              switchLayout={()=&gt; this.props.switchLayout()}
              grid={this.props.toggle.grid}
            /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      toggle: state.booleanReducer,
      searchItunes: state.searchItunesReducer
    };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
  
      switchLayout: () =&gt; {
        dispatch({
          type:"GRID"
        });
      },
  
      fetchMorePages: () =&gt; {
        dispatch({
          type:"ADDITIONALPAGES"
        });
      },
  
      onSearchChange: (term) =&gt; {
        dispatch({
          type:"SEARCHTERM",
          payload:term
        });
      },
  
      fetchITunesAlbums: (e) =&gt; {
        e.preventDefault();
          axios.get(`${PATH_BASE}?${PATH_TERM}${searchTerm}&amp;${COUNTRY}&amp;${ALBUMS}&amp;${LIMIT}`)
            .then(response =&gt;{
              dispatch({
                type: 'FETCHITUNESALBUMS',
                payload: response.data
              });
            });
          }
        };
      };
  
  export default connect(mapStateToProps,mapDispatchToProps)(App);
  </code></pre>
  
  <p>So my issue is with my axios url. For example if I hard code the url such as </p>
  
  <pre><code>axios.get(`${PATH_BASE}?${PATH_TERM}&amp;${'someband'}${COUNTRY}&amp;${ALBUMS}&amp;${LIMIT}`)
  </code></pre>
  
  <p>the I'm able to fetch the results from the server but not when I insert</p>
  
  <pre><code>axios.get(`${PATH_BASE}?${PATH_TERM}${searchTerm}&amp;${COUNTRY}&amp;${ALBUMS}&amp;${LIMIT}`)
  </code></pre>
  
  <p>and below is my <code>index.js</code></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import { render } from 'react-dom';
  import  { Provider }  from 'react-redux';
  import { createStore, combineReducers, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import logger from 'redux-logger';
  
  const booleanReducer = (state = { grid:true, additionalPages:false }, action) =&gt; {
    if (action.type === 'GRID'){
      return state = {
        ...state,
        grid:!state.grid
      }
    }
    if (action.type === 'ADDITIONALPAGES'){
      return state = {
        ...state,
        additionalPages:!state.additionalPages
      }
    }
    return state;
  };
  
  const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) =&gt; {
    if (action.type === 'SEARCHTERM'){
      return state = {
        ...state,
        searchTerm:action.payload
        }
      }
    if (action.type === 'FETCHITUNESALBUMS'){
      return state = {
        ...state,
        itunes: action.payload
  
        }
      }
        return state;
    }
  
  
  const middleware = applyMiddleware(thunk, logger)
  const store = createStore(combineReducers({booleanReducer,searchItunesReducer}),middleware);
  console.log(store.getState());
  
  store.subscribe(() =&gt;{
    console.log("store updated!", store.getState());
  });
  
  registerServiceWorker();
  ReactDOM.render(
  &lt;Provider store={store}&gt;
    &lt;App /&gt;
  &lt;/Provider&gt;
  , document.getElementById('root'));
  </code></pre>
  
  <p>Any help is highly appreciated...</p>