103

I have token authentication from a server, so when my Redux app is loaded initially I need make a request to this server to check whether user is authenticated or not, and if yes I should get token.

I have found that using Redux core INIT actions is not recommended, so how can I dispatch an action, before app is rendered?

0

11 Answers 11

80

You can dispatch an action in Root componentDidMount method and in render method you can verify auth status.

Something like this:

class App extends Component {
  componentDidMount() {
    this.props.getAuth()
  }

  render() {
    return this.props.isReady
      ? <div> ready </div>
      : <div>not ready</div>
  }
}

const mapStateToProps = (state) => ({
  isReady: state.isReady,
})

const mapDispatchToProps = {
  getAuth,
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
7
  • 1
    For me componentWillMount() did the thing. I defined a simple function calling all dispatch related actions in mapDispatchToProps() of App.js and called it in componentWillMount().
    – Froxx
    Jul 15, 2017 at 21:22
  • This is great, but using mapDispatchToProps seems more descriptive. What's your rationale behind using mapStateToProps instead?
    – achalk
    Aug 13, 2017 at 19:06
  • @adc17 Oooops :) thanks for the comment. I've changed my answer! Aug 23, 2017 at 8:46
  • 1
    @adc17 quote from doc: [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props. Aug 24, 2017 at 8:04
  • 2
    I got this error when trying to implement this solution Uncaught Error: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
    – markhops
    Nov 21, 2018 at 16:00
39

All of the answers here seem to be variations on creating a root component and firing it in the componentDidMount. One of the things I enjoy most about redux is that it decouples data fetching from component lifecycles. I see no reason why it should be any different in this case.

If you are importing your store into the root index.js file, you can just dispatch your action creator(let's call it initScript()) in that file and it will fire before anything gets loaded.

For example:

//index.js

store.dispatch(initScript());

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById('root')
);
7
  • 1
    I'm a react newbie, but based on reading the initial documentations on react and redux concepts, i believe this is the most fitting way. is there any advantage to create these initializations on a componentDidMount event?
    – kuzditomi
    Jun 16, 2019 at 14:07
  • 1
    It really depends on the situation. So the componentDidMount will fire before a specific component mounts. Firing store.dispatch() before ReactDOM.render()` fires before the app mounts. It's kind of like a componentWillMount for the entire app. As a newbie, I think it is better to stick to using the component lifecycle methods because it keeps logic tightly coupled to where it is being used. As apps get more and more complex this becomes harder to keep doing. My advise would be to keep it simple for as long as you can. Jun 17, 2019 at 8:55
  • 1
    I had to use the approach above recently. I had a google login button and I needed to fire a script to make it work before the app loaded up. If I waited for the app to load and then make the call it would have just taken longer to get the response, and delayed functionality in the app. If doing things in a lifecycle works for your use case, then stick to the lifecycles. They are simpler to think about. A good way to judge this is to picture yourself looking at the code 6 months from now. Which approach would be easier for you to intuitively understand. Pick that approach. Jun 17, 2019 at 9:02
  • 1
    Also, you really don't need to subscribe to the update on redux, just need to dispatch. That's the whole point of this approach, I am taking advantage of the fact that redux decouples doing the thing (data fetching, firing an action, etc) and using the result (rendering, responding, etc). Jun 20, 2019 at 8:24
  • 3
    I say YES to your point about dispatching. Redux does not say we have to dispatch actions from inside a react component. Redux is surely independent from react. Jun 20, 2019 at 16:07
36

I've not been happy with any solutions that have been put forward for this, and then it occurred to me that I was thinking about classes needing to be rendered. What about if I just created a class for startup and then push things into the componentDidMount method and just have the render display a loading screen?

<Provider store={store}>
  <Startup>
    <Router>
      <Switch>
        <Route exact path='/' component={Homepage} />
      </Switch>
    </Router>
  </Startup>
</Provider>

And then have something like this:

class Startup extends Component {
  static propTypes = {
    connection: PropTypes.object
  }
  componentDidMount() {
    this.props.actions.initialiseConnection();
  }
  render() {
    return this.props.connection
      ? this.props.children
      : (<p>Loading...</p>);
  }
}

function mapStateToProps(state) {
  return {
    connection: state.connection
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  };
}

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

Then write some redux actions to async initialise your app. Works a treat.

1
  • Now that's the solution what I've been looking for! I believe your insight here is perfectly right. Thanks.
    – YanivGK
    Sep 11, 2019 at 10:58
23

If you are using React Hooks, one single-line solution is

useEffect(() => store.dispatch(handleAppInit()), []);

The empty array ensures it is called only once, on the first render.

Full example:

import React, { useEffect } from 'react';
import { Provider } from 'react-redux';

import AppInitActions from './store/actions/appInit';
import store from './store';

export default function App() {
  useEffect(() => store.dispatch(AppInitActions.handleAppInit()), []);
  return (
    <Provider store={store}>
      <div>
        Hello World
      </div>
    </Provider>
  );
}
1
11

Update 2020: Alongside with other solutions, I am using Redux middleware to check each request for failed login attempts:

export default () => next => action => {
  const result = next(action);
  const { type, payload } = result;

  if (type.endsWith('Failure')) {
    if (payload.status === 401) {
      removeToken();

      window.location.replace('/login');
    }
  }

  return result;
};

Update 2018: This answer is for React Router 3

I solved this problem using react-router onEnter props. This is how code looks like:

// this function is called only once, before application initially starts to render react-route and any of its related DOM elements
// it can be used to add init config settings to the application
function onAppInit(dispatch) {
  return (nextState, replace, callback) => {
    dispatch(performTokenRequest())
      .then(() => {
        // callback is like a "next" function, app initialization is stopped until it is called.
        callback();
      });
  };
}

const App = () => (
  <Provider store={store}>
    <IntlProvider locale={language} messages={messages}>
      <div>
        <Router history={history}>
          <Route path="/" component={MainLayout} onEnter={onAppInit(store.dispatch)}>
            <IndexRoute component={HomePage} />
            <Route path="about" component={AboutPage} />
          </Route>
        </Router>
      </div>
    </IntlProvider>
  </Provider>
);
3
  • 11
    Just to be clear react-router 4 doesn't support onEnter.
    – Rob L
    May 4, 2017 at 8:32
  • The IntlProvider should give you a hint at a better solution.. See my answer below.
    – Chris Kemp
    Jun 10, 2017 at 23:24
  • this use old react-router v3, look at my answer
    – stackdave
    Mar 20, 2018 at 8:20
5

With the redux-saga middleware you can do it nicely.

Just define a saga which is not watching for dispatched action (e.g. with take or takeLatest) before being triggered. When forked from the root saga like that it will run exactly once at startup of the app.

The following is an incomplete example which requires a bit of knowledge about the redux-saga package but illustrates the point:

sagas/launchSaga.js

import { call, put } from 'redux-saga/effects';

import { launchStart, launchComplete } from '../actions/launch';
import { authenticationSuccess } from '../actions/authentication';
import { getAuthData } from '../utils/authentication';
// ... imports of other actions/functions etc..

/**
 * Place for initial configurations to run once when the app starts.
 */
const launchSaga = function* launchSaga() {
  yield put(launchStart());

  // Your authentication handling can go here.
  const authData = yield call(getAuthData, { params: ... });
  // ... some more authentication logic
  yield put(authenticationSuccess(authData));  // dispatch an action to notify the redux store of your authentication result

  yield put(launchComplete());
};

export default [launchSaga];

The code above dispatches a launchStart and launchComplete redux action which you should create. It is a good practice to create such actions as they come in handy to notify the state to do other stuff whenever the launch started or completed.

Your root saga should then fork this launchSaga saga:

sagas/index.js

import { fork, all } from 'redux-saga/effects';
import launchSaga from './launchSaga';
// ... other saga imports

// Single entry point to start all sagas at once
const root = function* rootSaga() {
  yield all([
    fork( ... )
    // ... other sagas
    fork(launchSaga)
  ]);
};

export default root;

Please read the really good documentation of redux-saga for more information about it.

1
  • page won't load until this action is completed correct?
    – Markov
    Oct 24, 2019 at 20:29
2

Here's an answer using the latest in React (16.8), Hooks:

import { appPreInit } from '../store/actions';
// app preInit is an action: const appPreInit = () => ({ type: APP_PRE_INIT })
import { useDispatch } from 'react-redux';
export default App() {
    const dispatch = useDispatch();
    // only change the dispatch effect when dispatch has changed, which should be never
    useEffect(() => dispatch(appPreInit()), [ dispatch ]);
    return (<div>---your app here---</div>);
}
1
  • App must be under Provider. To make TypeScript happy I had to ad an extra closure around dispatch: useEffect(() => { dispatch(AppInit()) }, []).
    – PEZO
    Dec 28, 2020 at 11:28
0

I was using redux-thunk to fetch Accounts under a user from an API end-point on app init, and it was async so data was coming in after my app rendered and most of the solutions above did not do wonders for me and some are depreciated. So I looked to componentDidUpdate(). So basically on APP init I had to have accounts lists from API, and my redux store accounts would be null or []. Resorted to this after.

class SwitchAccount extends Component {

    constructor(props) {
        super(props);

        this.Format_Account_List = this.Format_Account_List.bind(this); //function to format list for html form drop down

        //Local state
        this.state = {
                formattedUserAccounts : [],  //Accounts list with html formatting for drop down
                selectedUserAccount: [] //selected account by user

        }

    }



    //Check if accounts has been updated by redux thunk and update state
    componentDidUpdate(prevProps) {

        if (prevProps.accounts !== this.props.accounts) {
            this.Format_Account_List(this.props.accounts);
        }
     }


     //take the JSON data and work with it :-)   
     Format_Account_List(json_data){

        let a_users_list = []; //create user array
        for(let i = 0; i < json_data.length; i++) {

            let data = JSON.parse(json_data[i]);
            let s_username = <option key={i} value={data.s_username}>{data.s_username}</option>;
            a_users_list.push(s_username); //object
        }

        this.setState({formattedUserAccounts: a_users_list}); //state for drop down list (html formatted)

    }

     changeAccount() {

         //do some account change checks here
      }

      render() {


        return (
             <Form >
                <Form.Group >
                    <Form.Control onChange={e => this.setState( {selectedUserAccount : e.target.value})} as="select">
                        {this.state.formattedUserAccounts}
                    </Form.Control>
                </Form.Group>
                <Button variant="info" size="lg" onClick={this.changeAccount} block>Select</Button>
            </Form>
          );


         }    
 }

 const mapStateToProps = state => ({
      accounts: state.accountSelection.accounts, //accounts from redux store
 });


  export default connect(mapStateToProps)(SwitchAccount);
0

If you're using React Hooks, you can simply dispatch an action by using React.useEffect

React.useEffect(props.dispatchOnAuthListener, []);

I use this pattern for register onAuthStateChanged listener

function App(props) {
  const [user, setUser] = React.useState(props.authUser);
  React.useEffect(() => setUser(props.authUser), [props.authUser]);
  React.useEffect(props.dispatchOnAuthListener, []);
  return <>{user.loading ? "Loading.." :"Hello! User"}<>;
}

const mapStateToProps = (state) => {
  return {
    authUser: state.authentication,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    dispatchOnAuthListener: () => dispatch(registerOnAuthListener()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);
0

Same solution as Chris Kemp mentions above. Could be even more generic, just a canLift func not tied to redux?

interface Props {
  selector: (state: RootState) => boolean;
  loader?: JSX.Element;
}

const ReduxGate: React.FC<Props> = (props) => {
  const canLiftGate = useAppSelector(props.selector);
  return canLiftGate ? <>{props.children}</> : props.loader || <Loading />;
};

export default ReduxGate;
-2

Using: Apollo Client 2.0, React-Router v4, React 16 (Fiber)

The answer selected use old React Router v3. I needed to do 'dispatch' to load global settings for the app. The trick is using componentWillUpdate, although the example is using apollo client, and not fetch the solutions is equivalent. You don't need boucle of

SettingsLoad.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from "redux";
import {
  graphql,
  compose,
} from 'react-apollo';

import {appSettingsLoad} from './actions/appActions';
import defQls from './defQls';
import {resolvePathObj} from "./utils/helper";
class SettingsLoad extends Component {

  constructor(props) {
    super(props);
  }

  componentWillMount() { // this give infinite loop or no sense if componente will mount or not, because render is called a lot of times

  }

  //componentWillReceiveProps(newProps) { // this give infinite loop
  componentWillUpdate(newProps) {

    const newrecord = resolvePathObj(newProps, 'getOrgSettings.getOrgSettings.record');
    const oldrecord = resolvePathObj(this.props, 'getOrgSettings.getOrgSettings.record');
    if (newrecord === oldrecord) {
      // when oldrecord (undefined) !== newrecord (string), means ql is loaded, and this will happens
      //  one time, rest of time:
      //     oldrecord (undefined) == newrecord (undefined)  // nothing loaded
      //     oldrecord (string) == newrecord (string)   // ql loaded and present in props
      return false;
    }
    if (typeof newrecord ==='undefined') {
      return false;
    }
    // here will executed one time
    setTimeout(() => {
      this.props.appSettingsLoad( JSON.parse(this.props.getOrgSettings.getOrgSettings.record));
    }, 1000);

  }
  componentDidMount() {
    //console.log('did mount this props', this.props);

  }

  render() {
    const record = resolvePathObj(this.props, 'getOrgSettings.getOrgSettings.record');
    return record
      ? this.props.children
      : (<p>...</p>);
  }
}

const withGraphql = compose(

  graphql(defQls.loadTable, {
    name: 'loadTable',
    options: props => {
      const optionsValues = {  };
      optionsValues.fetchPolicy = 'network-only';
      return optionsValues ;
    },
  }),
)(SettingsLoad);


const mapStateToProps = (state, ownProps) => {
  return {
    myState: state,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators ({appSettingsLoad, dispatch }, dispatch );  // to set this.props.dispatch
};

const ComponentFull = connect(
  mapStateToProps ,
  mapDispatchToProps,
)(withGraphql);

export default ComponentFull;

App.js

class App extends Component<Props> {
  render() {

    return (
        <ApolloProvider client={client}>
          <Provider store={store} >
            <SettingsLoad>
              <BrowserRouter>
            <Switch>
              <LayoutContainer
                t={t}
                i18n={i18n}
                path="/myaccount"
                component={MyAccount}
                title="form.myAccount"
              />
              <LayoutContainer
                t={t}
                i18n={i18n}
                path="/dashboard"
                component={Dashboard}
                title="menu.dashboard"
              />
1
  • 2
    This code is incomplete and needs trimming for the irrelevant parts to the question. Jan 19, 2019 at 10:22

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.