title: How to dispatch an redux action to load data inside useEffect on page load
body: <p>I am trying to integrate redux to an existing react application. I am learning redux. I am using hooks. In the internet there are many examples of using class components. I could not find an example how to achieve this with a function component. </p>
  
  <p>The code below does not throw an error. But, the action inside <code>useEffect</code> is not called. The code does not produce any output. I wonder if the call is correct or not. Any help?</p>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>const store = createStore(rubricReducer, applyMiddleware(thunk));     
  ReactDOM.render(
      &lt;BrowserRouter basename={baseUrl}&gt;
          &lt;Provider store={store} &gt; &lt;App /&gt; &lt;/Provider&gt;
          &lt;/BrowserRouter&gt;,
      rootElement);
  </code></pre>
  
  <p><strong>Rubrics.tsx</strong></p>
  
  <pre><code>const mapStateToProps = state =&gt; ({
      rubrics: state.rubrics.items,
      loading: state.rubrics.loading,
      error: state.rubrics.error
  });
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          getRubrics: () =&gt; dispatch(fetchRubrics())
      };
  }
  
  const Rubrics = (props) =&gt; {    
      const { rubrics, loading, error } = props;
  
      useEffect(() =&gt; {
          props.dispatch(fetchRubrics());
      }, []);    
  
      if (error) { return &lt;div&gt;Error! {error.message}&lt;/div&gt;; }    
      if (loading) { return &lt;div&gt;Loading...&lt;/div&gt;; }    
  
      return (    
          &lt;ul&gt;
              &lt;React.Fragment&gt;
                  {rubrics.map(rubric =&gt; {
                          return (
                              &lt;li key={rubric.id}&gt;{rubric.title}&lt;/li&gt;
  
                          );
                      })}
              &lt;/React.Fragment&gt;
          &lt;/ul&gt;
      )
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Rubrics);
  </code></pre>
  
  <p><strong>rubricActions.tsx:</strong></p>
  
  <pre><code>export function fetchRubrics() {
      return dispatch =&gt; {
          dispatch(fetchRubricsBegin());
  
          axios.get("api/Rubric/Index")
              .then(response =&gt; {
                  console.log('success: reading rubrics');
  
                  dispatch(fetchRubricsSuccess(response.data));
                  return response.data;
              })
              .catch(error =&gt; { fetchRubricsFailure(error) });
      };
  }
  
  export const FETCH_RUBRICS_BEGIN = "FETCH_RUBRICS_BEGIN";
  export const FETCH_RUBRICS_SUCCESS = "FETCH_RUBRICS_SUCCESS";
  export const FETCH_RUBRICS_FAILURE = "FETCH_RUBRICS_FAILURE";
  
  const fetchRubricsBegin = () =&gt; ({
      type: FETCH_RUBRICS_BEGIN
  })
  
  const fetchRubricsSuccess= (rubrics) =&gt; ({
      type: FETCH_RUBRICS_SUCCESS,
      payload: { rubrics}
  })
  
  
  const fetchRubricsFailure = (error) =&gt; ({
      type: FETCH_RUBRICS_FAILURE,
      payload: {error}
  })
  </code></pre>
  
  <p><strong>rubricReducer.tsx</strong> :</p>
  
  <pre><code>import {
      FETCH_RUBRICS_BEGIN,
      FETCH_RUBRICS_SUCCESS,
      FETCH_RUBRICS_FAILURE
  } from '../_actions/rubricActions';
  
  const initialState = {
      rubrics: [],
      loading: false,
      error: null
  };
  
  const rubricReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case FETCH_RUBRICS_BEGIN:
              return {
                  ...state,
                  loading: true,
                  error: null
              };
  
          case FETCH_RUBRICS_SUCCESS:
              return {
                  ...state,
                  loading: false,
                  items: action.payload.rubrics
              }
          case FETCH_RUBRICS_FAILURE:
              return {
                  ...state,
                  loading: false,
                  error: action.payload.error,
                  items: []
              };
          default:
              return state;
      }
  }
  export default rubricReducer;
  </code></pre>