CODEWITHSUNDEEP
javascriptreactjsreact-redux
Ominus
Ominus

Reputation: 5721

React NON SPA history

I have a application where we are using react on some pages. Its a pretty large site and turning it into a SPA would be pointless as most of the content is static.

However on the pages where we need things to be interactive i am using react and react-redux.

So i have a search page that builds a list of filters (aggregates from elastic search) that lets people filter down their search results (same thing 90% of the web is doing with search). This page is using react.

Lets say i click a filter for manufacturer, and then i apply a filter for a price range of some kind. I want to be able to hit the back button or click the back button and have it remove the last filter or more specifically move the state back to its previous version. I know this is possible but i keep smacking into react-router and SPA type answers/tutorials/documentation online.

Thanks in advance!

Upvotes: 1

Views: 201

Answers (1)

Kirill Shumilov
Kirill Shumilov

Reputation: 307

Looks like you need a history: redux-undo may help you with this.

About back button — do you mean that you want to intercept history.back and undo filter in this case? If so — you should add a hash to a window.location on every change of filter. So in this case, there are few strategies:

  1. You can store all filtering settings in the hash. And update redux state on changes. It might be useful for sharing a link, but it may be dangerous (you have to validate this data) and a link could be very long (it's like ?filter[type]=cars&filter[colour]=red&... in the old-fashioned PHP websites).
  2. You can use redux-undo and for each new history state just push something like history counter (incremental from 0 for every change in the history) into window.location.hash. So then you just can dispatch jumpToPast(indexFromHash). But if you want to give a user possibility to share the page with defined filters — you need to figure out how.

I'm sure there are some more solutions but I think they will like these or be even more difficult (using historyAPI and other things). So you can leave your choice on this.

If this doesn't fit you — just write why and tell more information. I'll update my answer.

Upvotes: 1

Related Questions