Simple React functional setState with the new React context API (requires React v16.3 or later)
npm i refunk
import React from 'react'import connect from 'refunk'// Create a state provider componentconst App =// Updaters are functions that return stateconst dec = count: statecount - 1const inc = count: statecount + 1// Connect the Controls component to the App stateconst Controls =const initialState =count: 0// initialize state with props
Refunk components initialize state from props and provide an
update function to their consumers.
When nesting Refunk components, the top-most component will control state for any child Refunk components.
update function works the same as
setState, but it's intended to be used with separate updater functions,
that can be shared across many parts of an application.
connect higher-order component creates state based on props for top-level components or connects into a parent Refunk component's state when nested.
This allows for the creation of stateful components that can work standalone or listen to a parent's state.
import React from 'react'import connect from 'refunk'const App =AppdefaultProps =count: 0
For lower-level access to React's context API, the Provider component can be used to create a context.
The Refunk Provider will convert props to initial state and provide the state and
update function through context.
import React from 'react'import Provider from 'refunk'const App =<Provider =><div /></Provider>
The context Consumer is also exported for lower-level access to the context API.
import React from 'react'import Provider Consumer from 'refunk'const inc = count: statecount + 1const App =<Provider =><Consumer><React.Fragment><samp>statecount</samp><button =>+</button></React.Fragment></Consumer></Provider>
Updaters are functions that are passed to the
An updater function takes
state as its only argument and returns a new state.
// updaters.js// Create an `updaters` module with functions to update the state of the appconst decrement = count: statecount - 1const increment = count: statecount + 1
// Counter.js// Use the updater functions in the connected Counter componentimport React from 'react'import connect from 'refunk'import decrement increment from './updaters'const Counter =<div><samp>Count: propscount</samp><button =>Decrement</button><button =>Increment</button></div>Counter
// App.js// Include the Counter component in Appimport React from 'react'import connect from 'refunk'import Counter from './Counter'const App =<div><h1>Hello</h1><Counter /></div>App
Build Your Own
Refunk's source is only about 50 LOC and relies on built-in React functionality. This library is intended to be used directly as a package and also to serve as an example of some ways to handle state in a React application. Feel free to fork or steal ideas from this project, and build your own version.
Refunk is meant as a simpler, smaller alternative to other state managment libraries that makes use of React's built-in component state. Refunk uses higher-order components, the new context API, and React component state management along with functional setState to help promote the separation of presentational and container components, and to keep state updating logic outside of the components themselves.