How to sync Redux state and url hash tag params

Asked
Active3 hr before
Viewed126 times

7 Answers

reduxstate
90%

I think you don’t need to. (Sorry for a dismissive answer but it’s the best solution in my experience.), What is the skill limit of a human swordsperson in a completely realistic world? ,What would be the best solution using react-router or even react-router-redux?,Asking for help, clarification, or responding to other answers.

Your store state would then look like (simplified):

{
   // Might be paginated, kept inside a "book", etc:
   visibleChapterSlugs: ['intro', 'wow', 'ending'],

   // A simple ID dictionary:
   chaptersBySlug: {
      'intro': {
         slug: 'intro',
         title: 'Introduction'
      },
      'wow': {
         slug: 'wow',
         title: 'All the things'
      },
      'ending': {
         slug: 'ending',
         title: 'The End!'
      }
   }
}
load more v
88%

I think you don’t need to. (Sorry for a dismissive answer but it’s the best solution in my experience.),react-router-redux can help you inject the url stuff to store, so every time hash tag changed, store also.,That’s it! Don’t store selected there. Instead let React Router handle it. In your route handler, write something like,Store is the source of truth for your data. This is fine. If you use React Router, let it be the source of truth for your URL state. You don’t have to keep everything in the store.

Your store state would then look like (simplified):

{
   // Might be paginated, kept inside a "book", etc:
   visibleChapterSlugs: ['intro', 'wow', 'ending'],

   // A simple ID dictionary:
   chaptersBySlug: {
      'intro': {
         slug: 'intro',
         title: 'Introduction'
      },
      'wow': {
         slug: 'wow',
         title: 'All the things'
      },
      'ending': {
         slug: 'ending',
         title: 'The End!'
      }
   }
}
load more v
72%

Because the url parameters only contain the slugs of the lectures and the chapters which are selected. In the store I have a list of lectures and chapters with a name, slug and a selected Boolean value.,We have a list of lectures and chapters where the user can select and deselect them. The two lists are stored in a redux store. Now we want to keep a representation of selected lecture slugs and chapter slugs in the hash tag of the url and any changes to the url should change the store too (two-way-syncing).,We couldn't really find some good examples where the react router is only used to maintain the hash tag of an url and also only updates one component.,That’s it! Don’t store selected there. Instead let React Router handle it. In your route handler, write something like

Your store state would then look like (simplified):

{
   // Might be paginated, kept inside a "book", etc:
   visibleChapterSlugs: ['intro', 'wow', 'ending'],

   // A simple ID dictionary:
   chaptersBySlug: {
      'intro': {
         slug: 'intro',
         title: 'Introduction'
      },
      'wow': {
         slug: 'wow',
         title: 'All the things'
      },
      'ending': {
         slug: 'ending',
         title: 'The End!'
      }
   }
}
load more v
65%

Support both React Router v4 and v5,Synchronize router state with redux store through uni-directional flow,Finally retrieve the ConnectedRouter and pass it the created history.,Support functional component hot reloading while preserving state

This is the url that we are used to seeing, with normal path, like this:

https: //myspa.com/app/loginhttps://myspa.com/app/dashboard
load more v
75%

https://stackoverflow.com/questions/36722584/how-to-sync-redux-state-and-url-hash-tag-params/36749963#36749963,Try react-router-redux,An excellent router for this is Redux-Little-Router.,If you want a super lightweight solution, just roll a middleware and a reducer with some actions:

If you want something more lightweight, i took inspiration from redux-little-router and built @touchtribe/redux-router for my company.

The idea behind my router is to define url-"patterns" once (/user/:userId), which the middleware matches against the current url. Url-changes get dispatched, with their pattern, matched path-parameters and query-parameters. Any reducer can then listen to these changes and update your state.

/user/: userId
load more v
40%

A number of examples have been created demonstrating a variety of methods of using the library with different technologies. Here is the most basic form of using it in a component:,When developing web applications, it's really common to want to encode parts of the state in URL query parameters to capture what users are seeing on screen. Think of things like filters, toggles, selected items, and so on. Storing them in the URL allows users to easily link others to what they are seeing and facilitates discussion. React URL Query makes doing this really easy.,The current front-runner for state management in React app's is Redux. When first dealing with encoding state in URL query parameters, it's common to wonder how to get them in sync with what is in the Redux store. Dan Abramov, Redux's creator, suggests that you don't do that. Instead, he puts forth the idea of decoding the query parameters in the mapStateToProps function (you can look into props.location.query if you're using React Router). However, when it comes to encoding changes to the query parameters back into the URL, we're back to calling router functions directly.,A library for managing state through query parameters in the URL in React. It integrates well with React Router and Redux and provides additional tools specifically targeted at serializing and deserializing state in URL query parameters. With React URL Query, you can create components where there is no difference in handling state from an external store like Redux and state from the URL.

Installation

npm install--save react - url - query
load more v
22%

Keep your router in sync with application state ✨,But the two libraries don't coordinate. You want to do time travel with your application state, but React Router doesn't navigate between pages when you replay actions. It controls an important part of application state: the URL.,These two hooks will allow you to store the state that this library uses in whatever format or wrapper you would like.,This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these libraries instead:

npm install--save react - router - redux
load more v

Other "redux-state" queries related to "How to sync Redux state and url hash tag params"