Rct-state NPM | npm.io

rct-state

Legend-State style state library with Rx for React

Installation

npm install rct-state

Usage

Basic usage for pure JavaScript:

// file: userData.ts

import { observable } from 'rct-state';

// define type for state
interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'jojo',
}

// create store
export const user$ = observable(user);

// get user id
const userId = user$.id.get();

// set user id
user$.id.set(99);

// watch user id change
user$.observe((state) => {
  return state.id
}, (id) => {
  console.log('user id changed:', id)
})

Basic usage for React Native or React component:

import React from 'react';
import { View, Text } from 'react-native'
import { user$ } from './userData'


export function UserPanel() {
  const { id, name } = user$.use()
  const userId = user$.id.use()
  const username = user$.useSelector((state) => state.id)

  // watch value change
  user$.useObserve((state) => state.name, username => {
    console.log(`user name changed: ${username}`)
  })

  return (
    <View>
      <Text>ID: { id }</Text>
      <Text>Name: { name }</Text>
    </View>
  )
}