robinweser / alveron Goto Github PK

View Code? Open in Web Editor NEW

63.0 3.0 2.0 32.02 MB

Elm & Reason inspired state management for React

Home Page: https://alveron.js.org

License: MIT License

JavaScript 63.67% CSS 9.21% TypeScript 6.40% MDX 20.72%

react state-management state redux context global-state react-context

alveron's Introduction

Alveron

Disclaimer: Alveron was formerly published as react-woodworm. It was renamed in order to replace the previous alveron package. The old react-woodworm version 4.0 is now published as alveron version 2.0. Sorry for the inconvenience.

Alveron is an Elm-inspired state management library for React support asynchronous effects by default.
It uses React's new context API and is super lightweight at only 1kb gzipped.
From version 3.0.0, it also provides a useAlveron hook.

It can handle both local component state as well as global state.

Support Me

If you're using Robin Frischmann's packages, please consider supporting his Open Source Work on Patreon.

Installation

# yarn
yarn add alveron

# npm
npm i --save alveron

Caution: It requires ^[email protected] to be present.

Documentation

We recommend starting with Why and How to understand why Alveron exists and how it works.

Examples

The Gist

Want to use Alveron with hooks already? Check out Using Hooks.

import React from 'react'
import { createStore } from 'alveron'

const model = 0
const actions = {
  increment: prevState => prevState + 1,
  decrement: prevState => prevState - 1,
  reset: () => model
}

// It also supports async side effects
// this is useful if you e.g. do API calls
const effects = {
  resetAsync: actions => setTimeout(
    actions.reset,
    1000
  )
}

const { Wrapper } = createStore({
  model,
  actions,
  effects
})

const Counter = () => (
  <Wrapper>
    {({ state, actions, effects }) => (
      <div>
        Count: {state}
        <button onClick={actions.increment}>+</button>
        <button onClick={actions.decrement}>-</button>
        <button onClick={effects.resetAsync}>Reset after 1 second</button>
      </div>
    )}
  </Wrapper>
)

Users

License

Alveron is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

alveron's People

Contributors

Stargazers

Watchers

Forkers

farskid beatadetkova

alveron's Issues

Provide Consumer API as an object

Instead of passing everything as separate parameters, we should rather use an object to allow future additions not to extend the params even more.

// old
<Consumer>{(state, actions, effects, more, evenMore) => ...}</Consumer>
// old
<Consumer>{({ state, actions, effects, more, evenMore }) => ...}</Consumer>

It also helps to only pick the keys that are actually required without leaving blank params.

react-woodworm.js.org

JS.ORG CLEANUP

Hello, it seems a js.org subdomain that was requested to target this repository (or another on this user/organisation) no longer works.
The subdomain requested was react-woodworm.js.org and had the target of rofrischmann.github.io/react-woodworm.
To keep the js.org subdomain you should add a page with reasonable content within a month so the subdomain doesn't resolve to a 404 any longer.
Otherwise the requested subdomain will be removed from JS.ORGs zonefile and the list of active subdomains.

If you are wanting to keep the js.org subdomain and have added reasonable content, YOU MUST reply to the main cleanup issue with the response format detailed at the top to keep the requested subdomain.

Any plan to support typescript?

I saw there's flow in this lib but I was wondering if you plan to support typescript in the future or if you are open to receive PR about it. There's also a chance to publish a separate package on typescript types repository.

shouldUpdate on Consumer

It might be helpful to implement basic shallow equality checks for the Consumer component or at least add the ability to add a custom shouldUpdate method.

Force effects to call actions

Instead of exposing setState freely, we could even restrict effects more to just calling actions.
Could be great in terms of testing and separation:

const model = []
const actions = {
  addUser: (state, user) => [
    ...state,
    user
  ]
}

const effects = {
  postUser: (actions, user) => fetch("api.com/users", { 
      method: 'POST', 
      body: JSON.stringify(user)
    }).then(res => res.json()).then(actions.addUser)
}

Make it work as a custom React Hook

Could look something like:

const model = []
const actions = {
  setList: (_, items) => items
}
const effects = {
  fetch: (actions) => fetch(....).then(actions.setList)
}

const Store = createStore({ model, actions, effects })

const SomeList = () => {
  const { state, effects } = useAlveron(Store)

  return (
    <div>
      {state.map(el => <div>{el}</div>)}
      <button onClick={effects.fetch} />
    </div>
  )
}

Improve documentation

We should extend the docs to explain the principles even better and to separate the API docs.
Maybe we should also use Gitbook like I usually do (fela.js.org, react-controlled-form.js.org, inline-style-prefixer.js.org).

Connect helper

I was wondering if there's any reason for the absence of a connect helper.

Let's say i have stateful component and I want to call an effect that fetches an API on componentDidMount. How can i achieve it without hooks?

because right now i was trying to use Hooks but i get useAlveron is not a function because on import it's an object and not a function, so i suppose my react version doesn't support hooks.

"react": "16.6.3",