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

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request