redux-component

Create stateful React Component using goodness from redux

Quick start: Say Hi

The form component that reads name and email from the user and submit the form to the API server.

import { Componentize } from "redux-component";

const createComponent = Componentize(/* ... */);

const Component = createComponent(function SayHi (props, state, actions) {
  return (
    <form onSubmit={e => actions.submitForm(props, e)}>
      {renderUsername(state.usernameLoading, props.userId, state.username)}
      {renderError(state.error)}
      <input type="text" value={state.formValues.name} onChange={e => actions.textChanged(`name`, e)} />
      <input type="email" value={state.formValues.email} onChange={e => actions.textChanged(`email`, e)} />
      <button type="submit">Hi</button>
    </form>
  );
});

This basically covers everything for creating a stateful React component.

Documentation

See the full list of API.

Usage

redux-component requires React 0.13 or later.

npm install --save redux-component

All functions are available on the top-level export.

import { Componentize } from "redux-component";

Initiative

React 0.14 introduces stateless function components. However, what if I want to use pure functions to create stateful React components?

That's what redux-component does.

Manage a component's local state using a local redux store.

A isolated redux store is created for each React component instance. It has nothing to do with your global flux architecture. There are several goodness for this approach:

Express component state transition in a single reducer function
Event callbacks in redux actions are clean and easy to reason about
You build pure functions all the way: render, actions and reducer
No more this.setState() touched in your code
Easy to test React component implements

See the complete example in the examples/gh-pages folder and demo hosted on GitHub.

Contributing