ryze
TypeScript icon, indicating that this package has built-in type declarations

0.1.5 • Public • Published

Ryze

A minimal state management library for React.

Install

npm install ryze

Example

import {createStore} from 'ryze';

const {store, useSlice} = createStore({count: 10, todos: []});

const Counter = () => {
  const count = useSlice('count');

  return (
    <div>
      <div>count: {count}</div>
      <button
        onClick={() => {
          store.setState((prev) => ({...prev, count: prev.count + 1}));
        }}
      >
        Add
      </button>
    </div>
  );
};

const getActiveTodos = (state) => state.todos.filter((item) => !item.completed);

const Todos = () => {
  const todos = useSlice(getActiveTodos);

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.date}>{todo.title}</li>
        ))}
      </ul>
      <button
        onClick={() => {
          store.setState((prev) => ({
            ...prev,
            todos: [...prev.todos, {title: 'New Todo', date: +new Date()}],
          }));
        }}
      >
        Add
      </button>
    </div>
  );
};

const Example = () => {
  return (
    <>
      <Counter />
      <Todos />
    </>
  );
};

Constraints

Selectors

Selector passed to useSlice should have the same identity across re renders.

That is,

  • either declare selectors outside of components, or
  • if the selector is dependent on component props, use useCallback to ensure the selector only changes when the prop change.

Updates

Updates should be immutable. Return new values, rather than modify the state value directly.

Package Sidebar

Install

npm i ryze

Weekly Downloads

908

Version

0.1.5

License

MIT

Unpacked Size

17.8 kB

Total Files

7

Last publish

Collaborators

  • xiaofan1006