reactjs - Integrating Dispatch Actions in Container Component Pattern -

so i'm confused on how integrate container , component pattern. i've been reviewing examples morning , nothing seems clicking. how have been worked react on first project fetch data within view components , pass data down props using @connect works, in "automagically" way me @ time.

import react; ... import {action} 'path/to/action.js';  @connect((store) => {return{ key: store.property}});  export class component{   componentwillmount(){     this.props.dispatch(action());   } } 

as i'm working more react want learn more "correct" way of building out redux , understand on deeper level happening.

what have setup

index.jsx (this renders of hocs)   |       app.jsx (container)     |     auth.jsx (component)       |       layout.jsx (component) - contains app content       --or--       autherror.jsx (component) - 401 unauthenticated error page 

authentication handled through outside resource app not control logging in or out. there no log in/out states receiving object api identifies user role & authenticated boolean.

what happen when app loads, fetch data mock api, json server. there render auth component. auth component take in props app.jsx , either render layout.jsx or autherror.jsx.

where i'm running issues how should integrated. i'm going omit lines of code don't think absolutely pertain question.

store.js

import { applymiddleware, combinereducers, createstore } 'redux'; import thunk 'redux-thunk'; import { createlogger } 'redux-logger'; import promise 'redux-promise-middleware'; import { composewithdevtools } 'redux-devtools-extension'; import reducer './reducers';  const middleware = applymiddleware(promise(), thunk, createlogger());  export default createstore(reducer, composewithdevtools(middleware)); 

index.jsx

import react 'react'; import store './store.js'; import reactdom 'react-dom'; import { provider } 'react-redux';  import app './containers/app.jsx';  reactdom.render(   <provider store={store}>     <app />   </provider>, document.getelementbyid('root') ); 

app.jsx

import react, { component } 'react'; import { connect } 'react-redux'; import { bindactioncreators } 'redux'; import { authenticateuser } '../actions/authactions.js'; import auth '../components/auth.jsx';  class app extends component {   constructor(props) {     super(props);       this.state = {         authenticated: false // needs set       };   }   componentwillmount() {     console.log('app props', this.props);     // this.props.actions.authenticateuser();     authenticateuser(); // runs doesn't run dispatch function     // think needs happen here dispatch action , setstate referring how previous build react redux.   }   render() {     return (         <auth app_name={applicationname} authenticated={this.state.authenticated} {...this.props} />     );   } }  const mapstatetoprops = state => {   console.log('redux store auth state', state);   return {     auth: state.auth   }; };  const mapdispatchtoprops = dispatch => {   return { actions: bindactioncreators(authenticateuser, dispatch) }; };  export default connect(mapstatetoprops, mapdispatchtoprops)(app); 

auth.jsx

import react 'react'; import { route } 'react-router-dom';  import autherror './autherror.jsx'; import layout './layout.jsx';  export default function auth(props) {   console.log('auth props', props);   const renderlayout = () => {     if (props.authenticated == true) {         return <layout app_name={props.app_name} />;     } else {         return <autherror />;     }   };   return <route path="/" render={renderlayout} />; } 

authreducer.js

export default function reducer(   state = {     authenticated: null   },   action ) { switch (action.type) {   case 'auth_successful': {     return {       ...state,         authenticated: action.payload.authenticated     };     break;     }     case 'auth_rejected': {       return {         ...state,         authenticated: false       };     }   }   return state; } 

authactions.js

import axios 'axios';  export function authenticateuser() { console.log('authenticate user action has been called'); return function(dispatch) {   // nothing runs within block it's leading me believe nothing being `dispatch`ed     console.log('dispatch', dispatch);     axios         .get('localhost:3004/auth')         .then(response => {           dispatch({ type: 'auth_successful', payload: response.data });             console.log('response', response);         })         .catch(err => {             dispatch({ type: 'auth_rejected', payload: err });             console.log('error', err);         });     }; } 

right inside of app.jsx can console state of authreducer , can call authenticateuser() in actions. when call authenticateuser() return dispatch function doesn't run. should dispatching auth action in app.jsx? or should dispatching auth in auth.jsx prop have app.jsx fetch data? bit lost on breaking apart , piece should doing work.

your authenticateuser returns function, need literally run function. right way add property in mapdispatchtoprops

const mapdispatchtoprops = dispatch => { return { authenticateuser: () => dispatch(authenticateuser()) }; }; then, in componentwillmount function, call this.props.authenticateuer()

check this

wiki