軽量版reduxまとめ

storybookとか、大したアプリケーションを作らない時にreactのstate以上redux未満なものが欲しくなるときがあるので、軽量版reduxをまとめました。随時更新。

20171215更新：react-powerplug追加

react-powerplug

Renderless Pluggable State Containers
https://github.com/renatorib/react-powerplug

sample

import { State, Index, Toggle } from 'react-powerplug'
import { Pagination, Tabs, Checkbox } from './MyDumbComponents'

<State initial={{ offset: 0, limit: 10, totalCount: 200 }}>
  {({ state, setState }) => (
    <Pagination {...state} onChange={(offset) => setState({ offset })} />
  )}
</State>

<Index initial={0}>
  {({ index, setIndex }) => (
    <Tabs selected={index} onChange={setIndex}>
      <Tab title="First tab">Content from the first tab</Tab>
      <Tab title="Second tab">Content from the second tab</Tab>
    </Tabs>
  )}
</Index>

<Toggle initial={true}>
  {({ on, toggle }) => (
    <Checkbox checked={on} onChange={toggle} />
  )}
</Toggle>

// You can also use a `render` prop instead

<Toggle
  initial={false}
  render={({ on, toggle }) => (
    <Checkbox checked={on} onChange={toggle}>
  )}
/>

Refunk

Simple React functional setState
https://github.com/jxnblk/refunk

sample

import React from 'react'
import connect from 'refunk'

const App = connect(props => (
  <div>
    <h1>count: {props.count}</h1>
    <Controls />
  </div>
))

const dec = state => ({ count: state.count - 1 })
const inc = state => ({ count: state.count + 1 })

const Controls = connect(props => (
  <div>
    <samp>{props.count}</samp>
    <button onClick={e => props.update(dec)}>
      -
    </button>
    <button onClick={e => props.update(inc)}>
      +
    </button>
  </div>
))

const initialState = {
  count: 0
}

render(<App {...initialState} />)

Repatch

Repatch is just a simplified Redux, that let you create actions more briefly by dispatching reducers directly.
https://github.com/jaystack/repatch

sample

import Store from 'repatch';

const store = new Store([]);
const addTodo = text => todos => [...todos, { text, checked: false }];

const checkTodo = index => todos => todos.map(
  (todo, i) => (i === index ? { ...todo, checked: !todo.checked } : todo)
);

const editTodo = (index, text) => todos => todos.map(
  (todo, i) => (i === index ? { ...todo, text } : todo)
);

const removeTodo = index => todos => todos.filter((_, i) => i !== index);

redux-ui

Easy UI state management for react redux
https://github.com/tonyhb/redux-ui

sample

import ui from 'redux-ui';
import React, { Component } from 'react';

@ui({
  state: {
    filter: (props, state) => state.router.location.query.filter,
    isFormVisible: true,
    isBackgroundRed: false
  }
})
class A extends Component {
  render() {
    return (
      <div>
        <pre><code>{ this.props.ui }</code></pre>
        <B />
      </div>
    );
  }
}

redux-zero

A lightweight state container based on Redux
https://github.com/concretesolutions/redux-zero

sample

import React from "react";
import { connect } from "redux-zero/react";

import actions from "./actions";

const mapToProps = ({ count }) => ({ count });

export default connect(mapToProps, actions)(({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <div>
      <button onClick={decrement}>decrement</button>
      <button onClick={increment}>increment</button>
    </div>
  </div>
));