67

GitHub - pedronauck/reworm: the simplest way to manage state!

 5 years ago
source link: https://github.com/pedronauck/reworm
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md


68747470733a2f2f63646e2d7374642e64707263646e2e6e65742f66696c65732f6163635f3634393635312f4c4165766a6c

68747470733a2f2f62616467656e2e6e65742f6e706d2f762f7265776f726d 68747470733a2f2f62616467656e2e6e65742f7472617669732f706564726f6e6175636b2f7265776f726d 68747470733a2f2f62616467656e2e6e65742f62616467652f6c6963656e73652f4d49542f626c7565

68747470733a2f2f63646e2d7374642e64707263646e2e6e65742f66696c65732f6163635f3634393635312f557455466935

?   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.

?   Install and Usage

Install reworm using your package manager

$ yarn add reworm

Then just create your new state and use it!

import React from 'react'
import { create } from 'reworm'

const { State, get } = create({ name: 'John' })

const App = () => (
  <State>
    <div>{get(s => s.name)}</div>
  </State>
)

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:

import React from 'react'
import { create } from 'reworm'

const { State, set, get } = create({ name: 'John' })

class App extends React.Component {
  componentDidMount() {
    set(prev => ({ name: 'Peter' + prev.name }))
  }
  render() {
    return (
      <State>
        <div>{get(s => s.name)}</div>
      </State>
    )
  }
}

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.

import React from 'react'
import { create } from 'reworm'

const { State, select } = create({ list: ['Peter', 'John'] })

const johnSelector = select(s =>
  s.list.filter(user => user.includes('Peter'))
)

const App = () => (
  <State>
    <div>{johnSelector(user => user)}</div>
  </State>
)

?   API

create<T>(initial?: T): State

Create a new state

State<T>: ReactComponent<{ initial?: T }>

Use this component as wrapper when you want to access your 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) => T) => (fn: GetFn<T>) => React.ReactNode

Create selectors that can be used with your state and avoid repeating code.

import React from 'react'
import { create } from 'reworm'

const { State, select } = create({ name: 'John' })
const userSelector = select(s => s.name)

const App = () => (
  <State>
    {userSelector}
  </State>
)

?   Typings

interface ProviderProps<T> {
  initial?: T
}

type PrevState<T> = (prevState: T) => T
type GetFn<T> = (state: T) => React.ReactNode

interface State<T> {
  get: (fn: GetFn<T>) => React.ReactNode
  set: (param: T | PrevState<T>) => void
  select: (selector: (state: T) => T) => (fn: GetFn<T>) => React.ReactNode
  State: React.ComponentType<ProviderProps<T>>
}

function create<T>(initial: T) => State<T>

?   Contribute

If you want to contribute to this project, please see our Contributing Guide !


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK