title: Trouble using Redux-Sauce in App? What am I doing wrong?
body: <p>I am supposed to fetch data from an endpoint and display the results using Redux-Sauce.
  All is fine except I can't seem to update the state after I fetch data. Read the docs so this is what I could come up with. Please tell me what I am doing wrong!?
  How do I update the state calling the action creators inside HomeContainer.js?</p>
  <p>Link to codeSandbox</p>
  <p><a href="https://codesandbox.io/s/fragrant-sky-56yhi?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/fragrant-sky-56yhi?file=/src/index.js</a></p>
  <p>HomeContainer.js</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import { connect } from &quot;react-redux&quot;;
  import Creators from &quot;../redux/Reducers/reducers&quot;;
  
  const HomeContainer = ({ iTunesData, actions }) =&gt; {
    const { loading, data, error } = iTunesData;
    const [searchTerm, setSearchTerm] = useState(&quot;&quot;);
  
    const submitHandler = (e) =&gt; {
      e.preventDefault();
  
      const getData = async () =&gt; {
        actions.fetchDataRequest();
  
        try {
          const { data } = await axios.get(
            `https://itunes.apple.com/search?term=${searchTerm}`
          );
  
          // console.log(data);
  
          actions.fetchDataSuccess(data);
        } catch (error) {
          actions.fetchDataFail(error);
        }
      };
  
      getData();
      // console.log(&quot;On submit handler clicked!&quot;);
    };
  
    // console.log(iTunesData, actions);
    // console.log(searchTerm);
    // console.log(iTunesData);
    console.log(loading, data, error);
    return (
      &lt;form onSubmit={submitHandler}&gt;
        &lt;h1&gt; Home Container&lt;/h1&gt;
  
        &lt;input
          placeholder=&quot;Search...&quot;
          type=&quot;text&quot;
          onChange={(e) =&gt; setSearchTerm(e.target.value)}
        /&gt;
        &lt;button&gt;Go&lt;/button&gt;
      &lt;/form&gt;
    );
  };
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      iTunesData: state
    };
  };
  const mapDispatchToProps = (state, ownProps) =&gt; {
    return {
      actions: Creators
    };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(HomeContainer);
  
  </code></pre>
  <p>reducer.js</p>
  <pre><code>import { createReducer, createActions } from &quot;reduxsauce&quot;;
  
  const { Types, Creators } = createActions({
    fetchDataRequest: null,
    fetchDataSuccess: [&quot;payload&quot;],
    fetchDataFail: [&quot;error&quot;]
  });
  
  export default Creators;
  
  const initialState = {
    loading: false,
    data: [],
    error: false
  };
  
  export const fetchDataRequest = (state = initialState, action) =&gt; {
    return { ...state, loading: true, data: [], error: false };
  };
  
  export const fetchDataSuccess = (state = initialState, action) =&gt; {
    return { ...state, data: action.payload, error: false };
  };
  
  export const fetchDataFail = (state = initialState, action) =&gt; {
    return { ...state, data: null, error: action.error };
  };
  
  // map our action types to our reducer functions
  export const HANDLERS = {
    [Types.FETCH_DATA_REQUEST]: fetchDataRequest,
    [Types.FETCH_DATA_SUCCESS]: fetchDataSuccess,
    [Types.FETCH_DATA_FAIL]: fetchDataFail
  };
  
  export const reducer = createReducer(initialState, HANDLERS);
  </code></pre>
  <p>store.js</p>
  <pre><code>import { applyMiddleware, combineReducers, compose, createStore } from &quot;redux&quot;;
  import { reducer } from &quot;./Reducers/reducers&quot;;
  import thunk from &quot;redux-thunk&quot;;
  
  const store = createStore(reducer, applyMiddleware(thunk));
  
  export default store;
  </code></pre>
  <p>index.js</p>
  <pre><code>import { StrictMode } from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import { Provider } from &quot;react-redux&quot;;
  import store from &quot;./redux/store&quot;;
  
  import App from &quot;./App&quot;;
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(
    &lt;StrictMode&gt;
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    &lt;/StrictMode&gt;,
    rootElement
  );
  
  </code></pre>