redux-persist-crosstab - Keep redux browser tab state in sync

  •        21

Add cross tab syncing to your redux app with 1 line. This tiny module listens to the window for redux-persist storage events. When an event occurs it will dispatch a rehydrate action. Redux Persist does a shallow merge of state during rehydration. This means that if state changes on two tabs simulataneously, it is possible that legitimate state will be lost in the merge. In most cases this will not be an issue. One scenario where this could happen is if both tabs are listening on a socket and they both receive a message at the same time. If you have this type of set up you will either need to blacklist the relevant reducers or implement a custom rehydration handler that takes into account the nuances of this situation.

https://github.com/rt2zz/redux-persist-crosstab

Tags
Implementation
License
Platform

   




Related Projects

redux-persist - persist and rehydrate a redux store

  •    Javascript

Persist and rehydrate a redux store. Basic usage involves adding persistReducer and persistStore to your setup. IMPORTANT Every app needs to decide how many levels of state they want to "merge". The default is 1 level. Please read through the state reconciler docs for more information.

redux-storage - Persistence layer for redux with flexible backends

  •    Javascript

Save and load the Redux state with ease. And you need to install at least one redux-storage-engine, as redux-storage is only the "management core".

login-flow - :key: A login/register flow built with React&Redux

  •    Javascript

This application demonstrates what a React.js based register/login workflow might look like on the Frontend. I used my react-boilerplate as a starting point — the app thus uses Redux, PostCSS, react-router, ServiceWorker, AppCache, bcrypt and lots more. The default username is AzureDiamond and the default password is hunter2, but feel free to register new users! The registered users are saved to localStorage, so they'll persist across page reloads.

react-native-simple-store - A minimalistic wrapper around React Native's AsyncStorage.

  •    Javascript

A minimalistic wrapper around React Native's AsyncStorage. The react-native-simple-store is a good match for apps that are not using redux. If you have already found that your app needs to use redux and you need to persist data to the device it is recommended that you make use of redux-persist which provides a clean interface for storing data in your reducers to device.

react-redux-firebase - Redux bindings for Firebase

  •    Javascript

Redux bindings for Firebase. Includes Higher Order Component (HOC) for use with React. The Material Example is deployed to demo.react-redux-firebase.com.


redux-form - A Higher Order Component using react-redux to keep form state in a Redux store

  •    Javascript

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state. You can play around with redux-form in these sandbox versions of the Examples.

redux-beacon - Analytics integration for Redux and ngrx/store

  •    TypeScript

If you're using Redux or ngrx/store to manage your app's state, you can use Redux Beacon to tap into your dispatched actions and map them to events that are consumable by an analytics service (e.g. Google Analytics). With Redux Beacon your entire global state life-cycle becomes trackable. Redux Beacon is lightweight. The core Redux Beacon module is tiny (~ 1KB), and each target, extension, and util, is either around the same size or smaller.

redux-immutable - redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable

  •    Javascript

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux createStore reducer is created using redux-immutable then initialState must be an instance of Immutable.Collection.

redux-bug-reporter - :bug: A bug reporter and bug playback tool for redux. :bug:

  •    Javascript

Redux Bug Reporter puts minimal overhead on redux actions. However, it does keep copies of initial state, final state on bug submission, and full copies of all actions dispatched. For an application with heavy actions (such as network requests with large payloads) or very frequent actions, Redux Bug Reporter will gradually take up more and more memory. As such, it's probably a good idea to disable in production by default. The examples below demonstrate the expected common behavior of only enabling Redux Bug Reporter in non-production environments. Redux Bug Reporter disables itself by default if window is undefined, so it will not negatively impact server side renders.

redux-form-material-ui - A set of wrapper components to facilitate using Material UI with Redux Form

  •    Javascript

redux-form-material-ui is a set of wrappers to facilitate the use of material-ui components with redux-form. Rather than import your component class from material-ui, import it from redux-form-material-ui and then pass the component class directly to the component prop of Field.

redux-firestore - Redux bindings for Firestore

  •    Javascript

This assumes you are using npm as your package manager. It is common to make react components "functional" meaning that the component is just a function instead of being a class which extends React.Component. This can be useful, but can limit usage of lifecycle hooks and other features of Component Classes. recompose helps solve this by providing Higher Order Component functions such as withContext, lifecycle, and withHandlers.

redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI

  •    Javascript

Note that the implemention in this repository is different from Redux DevTools Extension. Please refer to the latter for browser extension. Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see walkthrough for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using LogMonitor for inspecting the state and time travel, and wrap it in a DockMonitor to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.

redux-saga-test-plan - Test Redux Saga with an easy plan.

  •    Javascript

Redux Saga Test Plan makes testing sagas a breeze. Whether you need to test exact effects and their ordering or just test your saga put's a specific action at some point, Redux Saga Test Plan has you covered. Redux Saga Test Plan aims to embrace both integration testing and unit testing approaches to make testing your sagas easy.

redux-tutorial - Learn how to use redux step by step

  •    Javascript

This repository contains a step by step tutorial to help grasp flux and more specifically Redux. The official and very exhaustive Redux documentation is available here and should be your number one source of truth regarding Redux. The present tutorial will only offer you an introduction to flux concepts through Redux use. For further or more detailed info, please refer to the Redux documentation.

react-redux-form - Create forms easily in React with Redux.

  •    Javascript

React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant. That's all you need. Seriously. Read the Documentation for more information.

redux-responsive - Manage the responsive state of your application using a redux reducer

  •    Javascript

A redux reducer for managing the responsive state of your application. redux-responsive does not require that you use React as your view library. However, since that is what is commonly used alongside redux, this documentation employs common React patterns.

redux-logger - Logger for Redux

  •    Javascript

LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay Redux actions + state, network requests, console logs, and see a video of what the user saw. Note: logger must be the last middleware in chain, otherwise it will log thunk and promise, not actual actions (#20).

react-redux-boilerplate - A minimal React-Redux boilerplate with all the best practices

  •    Javascript

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you. So it involves a lot of additional learning curve to get started with react-boilerplate. That's why I forked it, stripped it down and made this leaner, beginner friendly boilerplate without all the additional complexity.

redux-test-recorder - a redux middleware to automatically generate tests for reducers through ui interaction

  •    Javascript

Redux test recorder is a redux middleware for automatically generating tests for your reducers based on the actions in your app. Currently I've written redux-test-recorder-react a component to provide a gui for recording tests in react but I'm hopeful recording components for other frameworks can be created in the future. Also take a look at our latest build which currently runs a test generated using this module by taking advantage of the eval command. For a better idea of what is going on, you can take a look at the test file here.