Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pedronauck/reworm
🍫 the simplest way to manage state
https://github.com/pedronauck/reworm
react react-context redux state state-management
Last synced: 5 days ago
JSON representation
🍫 the simplest way to manage state
- Host: GitHub
- URL: https://github.com/pedronauck/reworm
- Owner: pedronauck
- License: mit
- Created: 2018-08-17T23:04:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:41:20.000Z (almost 2 years ago)
- Last Synced: 2024-11-30T00:06:20.251Z (12 days ago)
- Topics: react, react-context, redux, state, state-management
- Language: TypeScript
- Homepage:
- Size: 2.1 MB
- Stars: 1,466
- Watchers: 19
- Forks: 26
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-state - reworm
- awesome-list - reworm
- awesome-react-state-management - reworm - Reworm doesn't require you to use actions, connections or reducers. The simplest way to manage state! (List)
- awesome-star-libs - pedronauck / reworm
README
## 🧐 Why?
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.
### [Todo List Example](https://codesandbox.io/s/405lzj6m84)
## 💻 Install and Usage
Install reworm using your package manager
```bash
$ yarn add reworm
```
Then just wrap your app with our `Provider`, create your new state and use it!
```jsx
import React from 'react'
import { Provider, create } from 'reworm'
const { get } = create('userStore', { name: 'John' })
const App = () => (
{get(s => s.name)}
)
```
### Change your state easily
Instead of defining actions or something else to change your state, with reworm you just need to use the `set` method like that:
```js
import React from 'react'
import { Provider, create } from 'reworm'
const { set, get } = create('userStore', { name: 'John' })
class App extends React.Component {
componentDidMount() {
set(prev => ({ name: 'Peter' + prev.name }))
}
render() {
return (
{get(s => s.name)}
)
}
}
```
### Using selectors
Selectors are good because they prevent you from duplicating code. With it you can just create some functions and use them throughout your application.
```jsx
import React from 'react'
import { Provider, create } from 'reworm'
const { select } = create('userStore', { list: ['Peter', 'John'] })
const johnSelector = select(state =>
state.list.find(user => user.includes('John'))
)
const App = () => (
{johnSelector(user => user)}
)
```
### Listening state changes
If you want to listen changes on your state you can use `subscribe()`:
```jsx
import React from 'react'
import { Provider, create } from 'reworm'
const user = create('userStore')
class App extends Component {
state = {
name: 'John'
}
componentDidMount() {
user.subscribe(name => this.setState({ name }))
user.set('Michael')
}
render() {
return
Hello {this.state.name}
}
}
```
### Hooks
If you want to use hooks you can use the `useReworm`:
```jsx
import React, { useEffect } from 'react'
import { Provider, create, useReworm } from 'reworm'
const store = create('userStore', { name: 'John' })
const App = () => {
const { get, set } = useReworm('userStore')
useEffect(() => {
set(prev => ({ name: 'Peter' + prev.name }))
}, []);
return (
{get(s => s.name)}
)
}
```
## 🔎 API
#### `create(storeName: string, initial?: T): State`
Create a new state
#### `get((state: T) => React.ReactNode)`
Use this method to access your state
#### `set((state: T | (prevState: T) => T) => T)`
Use this method to set your state
#### `select(selector: (state: T) => S) => (fn: GetFn) => React.ReactNode`
Create selectors that can be used with your state and avoid repeating code.
#### `subscribe: (fn: SubscribeFn) => () => void`
Use this method to listen state changes
## 📝 Typings
```ts
type PrevState = (prevState: T) => T
type GetFn = (state: T) => React.ReactNode
type SubscribeFn = (state: T) => any
interface State {
get: (fn: GetFn) => React.ReactNode
set: (next: T | PrevState) => void
select: (
selector: (state: T) => S
) => (fn: GetFn) => React.ReactNode
subscribe: (fn: SubscribeFn) => () => void
}
function create(storeName: string, initial: T) => State
```
## 🕺 Contribute
If you want to contribute to this project, please see our [Contributing Guide](/CONTRIBUTING.md) !