CODEWITHSUNDEEP
reactjsreact-reduxjsxreact-router-redux
punkbit
punkbit

Reputation: 7707

How to access store in actions to dispatch push in react-router-redux?

In the documentation there's some information on how to issue navigation events via Redux actions ( https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions ), but how to access store from the actions ?

My action triggers dispatch(push('/foo')):

export function fetchReservationData(reservation_code, onError) {

    return (dispatch) => {
        fetch(apiConfig.find_my_product)
            .then(function(response) {
    
                if (response.ok) {

                    response.json().then(function (data) {
                        if (data.trolley.length > 0) {
                            dispatch({ type: UPDATE_TROLLEY_DATA, payload: data });
                            // todo: use router-redux push instead
                            //window.location.pathname = '/your-trolley';
                            dispatch(push('/your-trolley'));
                        } else {
                            dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });                          
                        }
                    });

                } else {

                    // todo: handle exception
                    console.log('Network response was not ok.');
                    dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });

                }

            })
            .catch(function (error) {

                // todo: handle error
                // handle it gracefully asked user to try again, if the problem keeps ocurring to
                // talk with a staff member to report it to the backend team
                console.log('There has been a problem with your fetch operation: ' + error.message);
                dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });

            });
    }

}

Meanwhile, if called from the app entry point it works (see the commented timeout):

import React from 'react';
import ReactDOM from "react-dom";
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import { syncHistoryWithStore, routerMiddleware, push } from 'react-router-redux'
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import reducers from './reducers';
import thunk from 'redux-thunk';

// const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// const store = createStoreWithMiddleware(reducers);
const store = createStore(
    reducers,
    applyMiddleware(thunk),
    applyMiddleware(routerMiddleware(browserHistory))
);
const history = syncHistoryWithStore(browserHistory, store);

// this needs to work in the actions
// setTimeout(() => {
//  store.dispatch(push('/your-trolley'));
// }, 3000);

ReactDOM.render(
    <Provider store={ store }>
        <Router history={ history } routes={ routes } />
    </Provider>,
    document.getElementById('app')
);

Upvotes: 0

Views: 7214

Answers (1)

Dhruv Kumar Jha
Dhruv Kumar Jha

Reputation: 6569

but how to access store from the actions ?

I don't think accessing store from actions is a good idea.

But to get the result you're looking for, in your actions file you could do

import { push } from 'react-router-redux';

export function changePage( url ) {
  return push(url);
}


// since you're using thunk middleware, you can also do
export function someAction( url ) {
  return dispatch => {
    dispatch( push(url) );
    // and you can call dispatch multiple times here.
  }
}

And you can also look at the updated answer here, react-router-redux webpack dev server historyApiFallback fails

It shows how you can access and dispatch push directly from the component.

Upvotes: 3

Related Questions