Access history object inside action creator

Question

I have a number of action creators, in which if the response coming back from the server is 401 I want to logout user (a shared functionality which requires access to history object). I need to have access history object inside the action creator. How should I do that ?

This is the action creator:

export function fetchGroups() {
  return (dispatch) => {
    axios.get(GROUP_ENDPOINT, AUTHORIZATION_HEADER)
      .then(response => {
          dispatch(groupsFetchSucceeded(response.data));
      })
      .catch(({response}) => {
        if (response.status ===  401) { // Unauthorized
          //logout user &
          //this.props.history.push('/login'); HERE I NEED ACCESS TO HISTORY
        } else {
          dispatch(groupsFetchErrored({
            error: response.data.message
          }));
        }
      })
  };
}

This is my app.js code:

ReactDOM.render(
  <Provider store={store}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route exact path="/login" render={props =>
                isAuthenticated() ? <Redirect to='/' /> :
                <LoginForm {...props}/>
            } />
            <Route exact path="/register" render={props =>
                isAuthenticated() ? <Redirect to='/' /> :
                <RegisterForm {...props}/>
            } />
            <PrivateRoute exact path="/group" component={GroupList}/>
            <PrivateRoute exact path="/group/new" component={GroupList} componentProps={{
              modal:{
                'content': NewGroup,
                'className': 'new-group-modal'
              }}}
            />
            <PrivateRoute exact path="/group/:id" component={ShowGroup} />
            <PrivateRoute component={Home}/>
          </Switch>
        </div>
      </BrowserRouter>
  </Provider>
  , document.querySelector('.container')); 

This is the component code:

class GroupList extends Component {

  _onDelete = (groupId) => {
    this.props.deleteGroup(groupId);
  }

  render() {
    const { groups } = this.props;
    let configs = [
      {
        name: 'name',
        label: 'Group'
      }
    ];
    let actions = [{
      action: this._onDelete
    }];
    return (
      <div>
        {
          <DataTable className="group-table" data={_.map(groups, group => group.data)} configs={configs} actions={actions}/>
        }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { groups: state.groups.data};
}

const mapDispatchToProps = (dispatch) => {
    return {
        deleteGroup: (id) => dispatch(deleteGroup(id))
    };
};

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

Answer 1

Make history.js file

import createHistory from 'history/createHashHistory'
export default createHistory()

In your action.js file

import history from './history'
history.push('/abc')

Source: Github https://github.com/ReactTraining/react-router/issues/3498

Answer 2

//this.props.history.push('/login'); // HERE I NEED ACCESS TO HISTORY

Pass the props to fetchGroups:

export function fetchGroups(props) {
    // ...
}

try:

props.router.history.push('./login');