• Stars
    star
    870
  • Rank 52,440 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Shared state management solution for React

react-sweet-state logo

react-sweet-state

The good parts of Redux and React Context in a flexible, scalable and easy to use state management solution

Philosophy

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 Hook, or Subscriber, is responsible to get the instantiated Store (creating a new one with initialState if necessary), allowing sharing state across your project extremely easy.

Similar to Redux thunks, actions receive a set of arguments to get and mutate the state. The default setState implementation is similar to React setState, accepting an object that will be shallow merged with the current state. However, you are free to replace the built-in setState logic with a custom mutator implementation, like immer for instance.

Basic usage

npm i react-sweet-state
# or
yarn add react-sweet-state

Creating and consuming stores

import { createStore, createHook } from 'react-sweet-state';

const Store = createStore({
  // value of the store on initialisation
  initialState: {
    count: 0,
  },
  // actions that trigger store mutation
  actions: {
    increment:
      () =>
      ({ setState, getState }) => {
        // mutate state synchronously
        setState({
          count: getState().count + 1,
        });
      },
  },
  // optional, unique, mostly used for easy debugging
  name: 'counter',
});

const useCounter = createHook(Store);
// app.js
import { useCounter } from './components/counter';

const CounterApp = () => {
  const [state, actions] = useCounter();
  return (
    <div>
      <h1>My counter</h1>
      {state.count}
      <button onClick={actions.increment}>+</button>
    </div>
  );
};

Documentation

Check the docs website or the docs folder.

Examples

See sweet-state in action: run npm run start and then go and check each folder:

  • Basic example with Flow typing http://localhost:8080/basic-flow/
  • Advanced async example with Flow typing http://localhost:8080/advanced-flow/
  • Advanced scoped example with Flow typing http://localhost:8080/advanced-scoped-flow/

Contributing

To test your changes you can run the examples (with npm run start). Also, make sure you run npm run preversion before creating you PR so you will double check that linting, types and tests are fine.

Thanks

This library merges ideas from redux, react-redux, redux-thunk, react-copy-write, unstated, bey, react-apollo just to name a few. Moreover it has been the result of months of discussions with ferborva, pksjce, TimeRaider, dpisani, JedWatson, and other devs at Atlassian.


With ❤️ from Atlassian

More Repositories

1

react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
JavaScript
33,330
star
2

pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
TypeScript
9,523
star
3

jest-in-case

Jest utility for creating variations of the same test
JavaScript
1,056
star
4

escalator

Escalator is a batch or job optimized horizontal autoscaler for Kubernetes
Go
663
star
5

github-for-jira

Connect your code with your project management in Jira
TypeScript
626
star
6

prosemirror-utils

⚒ Utils library for ProseMirror
TypeScript
479
star
7

nucleus

A configurable and versatile update server for all your Electron apps
TypeScript
396
star
8

docker-chromium-xvfb

Docker image for running browser tests against headless Chromium
Dockerfile
385
star
9

gostatsd

An implementation of Etsy's statsd in Go with tags support
Go
380
star
10

smith

Smith is a Kubernetes workflow engine / resource manager
Go
287
star
11

babel-plugin-react-flow-props-to-prop-types

Convert Flow React props annotation to PropTypes
JavaScript
234
star
12

better-ajv-errors

JSON Schema validation for Human 👨‍🎤
JavaScript
233
star
13

browser-interaction-time

⏰ A JavaScript library (written in TypeScript) to measure the time a user is active on a website
TypeScript
217
star
14

gajira

GitHub Actions for Jira
199
star
15

extract-react-types

One stop shop for documenting your react components.
JavaScript
179
star
16

stricter

A project-wide js-linting tool
TypeScript
157
star
17

data-center-helm-charts

Helm charts for Atlassian's Data Center products
Java
155
star
18

bazel-tools

Reusable bits for Bazel
Starlark
113
star
19

gajira-login

Jira Login GitHub Action
JavaScript
98
star
20

terraform-provider-artifactory

Terraform provider to manage Artifactory
Go
89
star
21

build-stats

🏆 get the build stats for pipelines 🏆
TypeScript
81
star
22

dc-app-performance-toolkit

Atlassian Data Center App Performance Toolkit
Python
75
star
23

kubetoken

Kubetoken
Go
74
star
24

koa-oas3

Request and response validator for Koa using Open API Specification
TypeScript
73
star
25

1time

Lightweight, thread-safe Java/Kotlin TOTP (time-based one-time passwords) and HOTP generator and validator for multi-factor authentication valid for both prover and verifier based on shared secret
Kotlin
68
star
26

gajira-transition

JavaScript
59
star
27

gajira-create

JavaScript
58
star
28

sketch-plugin

Design your next Atlassian app with our component libraries and suite of Sketch tools 💎
JavaScript
57
star
29

go-sentry-api

A go client for the sentry api https://sentry.io/api/
Go
50
star
30

themis

Autoscaling EMR clusters and Kinesis streams on Amazon Web Services (AWS)
JavaScript
48
star
31

gajira-todo

JavaScript
46
star
32

jira-cloud-for-sketch

A Sketch plugin providing integration with JIRA Cloud
JavaScript
45
star
33

gajira-find-issue-key

JavaScript
43
star
34

oas3-chow-chow

Request and response validator against OpenAPI Specification 3
TypeScript
42
star
35

validate-npm-package

Validate a package.json file
JavaScript
38
star
36

gajira-cli

JavaScript
38
star
37

conartist

Scaffold out and keep all your files in sync over time. Code-shifts for your file system.
JavaScript
34
star
38

gajira-comment

JavaScript
33
star
39

jira-github-connector-plugin

This project has been superseded by the JIRA DVCS Connector
JavaScript
30
star
40

voyager

Voyager PaaS
Go
29
star
41

atlaskit-framerx

[Unofficial] Atlaskit for Framer X (experimental)
TypeScript
28
star
42

jira-actions

Kotlin
27
star
43

sourcemap

Java
24
star
44

asap-authentication-python

This package provides a python implementation of the Atlassian Service to Service Authentication specification.
Python
23
star
45

go-artifactory

Go library for artifactory REST API
Go
23
star
46

vscode-extension-jira-frontend

JavaScript
18
star
47

ssh

Kotlin
16
star
48

jira-performance-tests

Kotlin
16
star
49

homebrew-tap

This repository contains a collection of Homebrew (aka, Brew) "formulae" for Atlassian
Ruby
16
star
50

atlassian-connect-example-app-node

TypeScript
15
star
51

docker-fluentd

Docker image for fluentd with support for both elasticsearch and kinesis
Makefile
11
star
52

infrastructure

Kotlin
11
star
53

omniauth-jira

OmniAuth strategy for JIRA
Ruby
11
star
54

jenkins-for-jira

Connect your Jenkins server to Jira Software Cloud for more visibility into your development pipeline
TypeScript
11
star
55

redis-dump-restore

Node.js library to dump and restore Redis.
JavaScript
10
star
56

fluent-plugin-kinesis-aggregation

fluent kinesis plugin shipping KPL aggregation format records, based on https://github.com/awslabs/aws-fluent-plugin-kinesis
Ruby
10
star
57

rocker

Little text UI for docker
Rust
9
star
58

hubot-stride

JavaScript
9
star
59

graphql-braid

9
star
60

copy-pkg

Copy a package.json with filters and normalization
JavaScript
8
star
61

gray-matter-loader

Webpack loader for extracting front-matter using gray-matter - https://www.npmjs.com/package/gray-matter
JavaScript
8
star
62

jsm-integration-scripts

Jira Service Management Integration Scripts
Python
8
star
63

autoconvert

TinyMCE plugin for Atlassian Autoconvert
JavaScript
8
star
64

less-plugin-inline-svg

A Less plugin that allows to inline SVG file and customize its CSS styles
JavaScript
7
star
65

aws-infrastructure

Kotlin
7
star
66

jira-hardware-exploration

Kotlin
6
star
67

report

HTML
6
star
68

virtual-users

Kotlin
6
star
69

docker-infrastructure

Kotlin
6
star
70

jobsite

Tools for working with workspaces as defined by Yarn, Lerna, Bolt, etc.
JavaScript
5
star
71

git-lob

Experimental large files in Git (discontinued, use git-lfs instead)
Go
5
star
72

ansible-ixgbevf

4
star
73

concurrency

Kotlin
4
star
74

jvm-tasks

Kotlin
4
star
75

ssh-ubuntu

Kotlin
4
star
76

jpt-example-btf

Java
3
star
77

gojiid

A Goji Middleware For adding Request Id to Context
Go
3
star
78

jira-software-actions

Kotlin
3
star
79

workspace

Kotlin
2
star
80

putty-sourcetree-fork

A fork of PuTTY used by Sourcetree
C
2
star
81

atlassian-connect-example-app-python

Python
2
star
82

atlassian-connect-example-app-java

Java
2
star
83

jec

JEC Client source codes and installation packages
Go
2
star
84

nadel-graphql-gateway-demo

Nadel GraphQL Gateway Demo app
HTML
1
star
85

parcel-stress-test

JavaScript
1
star
86

homebrew-bitbucket

A collection of pinned versions of dependencies for Bitbucket
Ruby
1
star
87

frontend-guides

1
star
88

tangerine-state-viewer

Visual Studio Code extension to facilitate tangerine state navigation
TypeScript
1
star
89

uniql-es

JavaScript
1
star
90

jasmine-http-server-spy

Creates jasmine spy objects backed by a http server.
CoffeeScript
1
star
91

packit-cli

CLI tool for creating package based architecture for enterprise frontend applications.
JavaScript
1
star
92

fluent-plugin-statsd_event

Fluentd plugin for sendind events to a statsd service
Ruby
1
star
93

github-packages-test

Test repo to verify artifact delivery pipeline
Kotlin
1
star
94

org.eclipse.jgit-atlassian

Java
1
star
95

jces-1209

Benchmark for Cloud and DC
Kotlin
1
star
96

webvieweventtest

TypeScript
1
star
97

quick-303

Cloud vs DC
Kotlin
1
star