redux-react-local - local component state via redux

  •        13

Add the supplied reducer to a key local on your redux store. However, because 'views' don't have global references / identities ala Backbone etc, communicating between these components can get cumbersome 2; we then resort to building some form of messaging system external to these components - callbacks, pubsub channels, flux stores, observable event chains, etc. The smart ones use context to expose these systems to a particular render tree, avoiding 'global' state, but still getting a similar model.

https://github.com/threepointone/redux-react-local

Tags
Implementation
License
Platform

   




Related Projects

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.

eslint-plugin-immutable - ESLint plugin to disable all mutation in JavaScript.

  •    Javascript

This is an ESLint plugin to disable all mutation in JavaScript. Think this is a bit too restrictive? Well if you're using Redux and React, there isn't much reason for your code to be mutating anything. Redux maintains a mutable pointer to your immutable application state, and React manages your DOM state. Your components should be stateless functions, translating data into Virtual DOM objects whenever Redux emits a new state. These ESLint rules explicitly prohibit mutation, effectively forcing you to write code very similar to Elm in React. There's no reason to use let in a Redux/React application, because all your state is managed by either Redux or React. Use const instead, and avoid state bugs altogether.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router. React Router is a fantastic routing library, but one downside is that it abstracts away a very crucial piece of application state — the current route! This abstraction is super useful for route matching and rendering, but the API for interacting with the router to 1) trigger transitions and 2) react to state changes within the component lifecycle leaves something to be desired.

redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React

  •    Javascript

How do you usually request data and store it to redux state? You create actions that do async jobs to load data, create reducer to save this data to redux state, then connect data to your component or container. Usually it's very similar routine tasks.

react-broadcast - Reliably communicate state changes to deeply nested React elements

  •    Javascript

react-broadcast provides a reliable way for React components to propagate state changes to their descendants deep in the component hierarchy, bypassing intermediaries who return false from shouldComponentUpdate.It was originally built to solve issues that arose from using react-router together with react-redux. The router needed a safe way to communicate state changes to <Link>s deep in the component hierarchy, but react-redux relies on shouldComponentUpdate for performance. react-broadcast allows the router to work seamlessly with Redux and any other component that uses shouldComponentUpdate.


react-router-redux - Ruthlessly simple bindings to keep react-router and redux in sync

  •    Javascript

You're a smart person. You use Redux to manage your application state. You use React Router to do routing. All is good.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.

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-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-react-hook - React Hook for accessing state and dispatch from a Redux store

  •    TypeScript

React hook for accessing mapped state and dispatch from a Redux store. NOTE: React hooks require react and react-dom version 16.8.0 or higher.

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.

deku - Render interfaces using pure functions and virtual DOM

  •    Javascript

Deku is a library for rendering interfaces using pure functions and virtual DOM. Instead of using classes and local state, Deku just uses functions and pushes the responsibility of all state management and side-effects onto tools like Redux. It also aims to support only modern browsers to keep things simple.

statty - A tiny and unobtrusive state management library for React and Preact apps

  •    Javascript

Most of the time, I see colleagues starting React projects setting up Redux + a bunch of middlewares and store enhancers by default, regardless of the project nature.Despite Redux being awesome, it's not always needed and it may slow down the process of onboarding new developers, especially if they are new to the React ecosystem (I have often seen colleagues being stuck for hours trying to understand what was the proper way to submit a simple form).

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.

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.

React-Redux-Sass-Starter - Everything you need to get started with a basic React application

  •    Javascript

A simple and quick way to get you going with developing React applications with Redux and Sass. Comes with pre-configured Webpack for bundling your application to help save time in setting up your project. Keeps CSS out of JavaScript to maintain separation of concerns. Redux takes care of State Management. If you are looking for CSS-in-JS approach, this starter pack is not for you.

redux-router - Redux bindings for React Router – keep your router state inside your Redux store

  •    Javascript

Redux bindings for React Router – keep your router state inside your Redux store

redux-ui - Easy UI state management for react redux

  •    Javascript

This is powerful. Each component is reusable and can still affect UI state for parent components. Step 3: In each child component use the basic @ui() decorator; it will automatically read and write UI state to the parent component's UI key.

connected-react-router - A Redux binding for React Router v4

  •    Javascript

✨ Synchronize router state with redux store with uni-directional flow (history -> store -> router -> components). 🎁 Support React Router v4.