Flummox
Guides
Quick Start
React Integration
Why FluxComponent > fluxMixin
API
Store
Flux
Actions
FluxComponent
Higher-order component
fluxMixin
GitHub

# `FluxComponent`

In v3.0, FluxComponent requires React 0.13. If you’re still on React 0.12, keep using Flummox 2.x until you’re able to upgrade.

Access the Flux instance and subscribe to store updates. Refer to the React integration guide for more information.

    <FluxComponent connectToStores={{
      posts: store => ({
        post: store.getPost(this.props.post.id),
      }),
      comments: store => ({
        comments: store.getCommentsForPost(this.props.post.id),
      })
    }}>
      <InnerComponent />
    </FluxComponent>

In general, it’s recommended to use FluxComponent instead of fluxMixin.

## State getters

The `stateGetter` prop can be used to control how state from stores are transformed into props:

    <FluxComponent
      connectToStores={['posts', 'session']}
      stateGetter={([postStore, sessionStore]) => ({
        posts: store.getPostForUser(sessionStore.getCurrentUserId())
      })}
    }}>
      <InnerComponent />
    </FluxComponent>

The `stateGetter` prop behaves differently depending on the value passed to the `connectToStores` prop, refer to fluxMixin for more details.

## Access flux with `this.props.flux`

In the child component, you can access the Flux instance with `this.props.flux`. For example, to perform an action:

    onClick(e) {
      e.preventDefault();
      this.props.flux.getActions('actionsKey').someAction();
    }

## Custom rendering

With FluxComponent, state from your stores is automatically passed as props to its children. This is nice for simple cases, especially when there’s only a single child. But for more complex cases, or if you want direct control over rendering, you can pass a custom render function prop to FluxComponent:

    // Using children
    <FluxComponent connectToStores={{
      posts: store => ({
        post: store.getPost(this.props.postId),
      })
    }}>
      <InnerComponent />
    </FluxComponent>

    // Using custom `render` function
    <FluxComponent
      connectToStores={{
        posts: store => ({
          post: store.getPost(this.props.postId),
        })
      }}
      render={storeState => {
        // Render whatever you want
        return <InnerComponent {...storeState} />;
      }}
    />

## Props

### `flux`

Indicates the Flux instance to be used. It will be added to the context of all its nested components. If unset, it’ll try to infer it from the context.

### `connectToStores`

This prop has the same effect as passing the first argument to fluxMixin's `connectToStores()`.

### `stateGetter`

This prop has the same effect as passing the second argument to fluxMixin's `connectToStores()`.

### `render`

Optionally overrides the rendering function, useful to control what state is passed down as props to components.