Simple shared store for your react app

Simple shared store for your react app

Very simple shared store for your react app.

React Shared State

React Shared State

Very simple shared state for your react app.

import React from 'react'
import { createProvider, SharedStore } from 'react-shared-state'

class NameStore extends SharedStore {
  setName = (newName) => this.setState({name: newName})
}

const NameProvider = createProvider(NameStore)

const HelloComponent = (props) => {
  return <div>
    <h1> Hello, {props.name} </h1>
    <button onClick={() => props.store.setName('Luke Skywalker')}>Set Name</button>
  </div>
}
const Hello = NameProvider.connect((store) => ({ 
  name: store.state.name,
  store: store 
}))(HelloComponent)

export function App() {
  return (
    <NameProvider initialState={{ name: 'Anonymous' }}>
      <Hello />
    </NameProvider>
  )
}

Install

yarn add react-shared-state
or
npm install react-shared-state

Quickstart

https://soofty.gitbook.io/react-shared-state/quickstart

Documentation

https://soofty.gitbook.io/react-shared-state/documentation

Live example

https://codesandbox.io/s/wy308n0k88

0.1.x => 0.2.x migration guide

  1. mapStateToProps now accepts store instead of store.state as first argument
  2. connect no longer passes store by it's name to a component
  3. Preferable way to use connect is YourProvider.connect instead of building custom function
  4. Changed Typescript's generics order from TOuterProps, TInnerProps to TInnerProps, TOuterProps (recompose format)

0.2.x => 0.3.x migration guide

getProvider replaced with createProvider(StoreClass?: class, storeId?: string)

Github Repository

Tags: #React #State