react-sweet-state - Shared state management solution for React

  •        443

sweet-state is heavily inspired by Redux mixed with Context API concepts. It has render-prop components or hooks, connected to Store instances (defined as actions and initial state), receiving the Store state (or part of it) and the actions as a result. Each Subscriber, or Hook, is responsible to get the instantiated Store (creating a new one with initialState if necessary), allowing sharing state across your project extremely easy.

https://github.com/atlassian/react-sweet-state#readme
https://github.com/atlassian/react-sweet-state

Tags
Implementation
License
Platform

   




Related Projects

constate - Scalable state manager using React context

  •    TypeScript

React state management library built with scalability in mind. You can start simple with local state and scale up to global state with ease when needed. In computer science, a container is a class, a data structure, or an abstract data type (ADT) whose instances are collections of other objects. In other words, they store objects in an organized way that follows specific access rules.

zustand - 🐻 Bear necessities for state management in React

  •    TypeScript

A small, fast and scaleable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated. Don't disregard it because it's cute. It has quite the claws, lots of time was spent to deal with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.

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-contextual - 🚀 react-contextual is a small (less than 1KB) helper around React 16s new context api

  •    Javascript

Click this link for a detailed explanation. Pass a store (which stores some state and actions to update the state) to Provider. Then receive the props in the store either by using a HOC or render-props.

concent - State management that tailored for react, it is simple, predictable, progressive and efficient

  •    Javascript

⚡️ State management that tailored for react, it is simple, predictable, progressive and efficient. Concent encourages simplicity. It saves you the hassle of creating boilerplate code and gives powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.


awesome-react-context - 😎 A curated list of stuff related to the new React Context API

  •    Javascript

Contributions welcome! Read the contribution guidelines first. To the extent possible under law, diegohaz has waived all copyright and related or neighboring rights to this work.

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.

reworm - the simplest way to manage state!

  •    TypeScript

Forget about actions, connections, reducers and a lot of boilerplate to create and manage states. With reworm you can create and manage state as simple as on the image above. Selectors are good because they prevent you from duplicating code. With it you can just create some functions and use them throughout your application.

redux-react-local - local component state via redux

  •    Javascript

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.

ReactStateMuseum - A whirlwind tour of React state management systems by example

  •    Javascript

Every app is meant to be small, simple, and the same as each other. The only difference should be the state management decisions of each. The repeated React and ReactNative app is a Packing List, with the name based on the state technology.

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.

react-values - A set of tiny React components for handling state with render props.

  •    Javascript

A set of tiny, composable React components for handling state with render props. It does this using a small render-prop-based API that exposes helpful transforms like toggle, increment, filter, etc. depending on the type of value, all based on JavaScripts native value types...

reactn - React, but with built-in global state management.

  •    TypeScript

ReactN is a extension of React that includes global state management. It treats global state as if it were built into React itself -- without the boilerplate of third party libraries. For support, reach out to us on the Reactiflux Discord channel #reactn.

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.

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-automata - A state machine abstraction for React

  •    Javascript

A state machine abstraction for React that provides declarative state management and automatic test generation. react and react-test-renderer are peer dependencies.

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-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.

akita - 🚀 State Management Tailored-Made for JS Applications

  •    TypeScript

Whether it be Angular, React, Vue, Web Components or plain old vanilla JS, Akita can do the heavy lifting and serve as a useful tool for maintaining clean, boilerplate-free, and scalable applications. Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Stores model.

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.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.