acdlite/flummox

{"path":"api/fluxcomponent","content":"`FluxComponent`\n===============\n\n**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.**\n\nAccess the Flux instance and subscribe to store updates. Refer to the [React integration guide](../guides/react-integration.md) for more information.\n\n\n```js\n<FluxComponent connectToStores={{\n  posts: store => ({\n    post: store.getPost(this.props.post.id),\n  }),\n  comments: store => ({\n    comments: store.getCommentsForPost(this.props.post.id),\n  })\n}}>\n  <InnerComponent />\n</FluxComponent>\n```\n\nIn general, [it's recommended to use FluxComponent instead of fluxMixin](../guides/why-flux-component-is-better-than-flux-mixin.md).\n\nState getters\n-------------\n\nThe `stateGetter` prop can be used to control how state from stores are transformed into props:\n\n```js\n<FluxComponent\n  connectToStores={['posts', 'session']}\n  stateGetter={([postStore, sessionStore]) => ({\n    posts: store.getPostForUser(sessionStore.getCurrentUserId())\n  })}\n}}>\n  <InnerComponent />\n</FluxComponent>\n```\n\nThe `stateGetter` prop behaves differently depending on the value passed to the `connectToStores` prop, refer to [fluxMixin](fluxmixin.md) for more details.\n\n\nAccess flux with `this.props.flux`\n----------------------------------\n\nIn the child component, you can access the Flux instance with `this.props.flux`. For example, to perform an action:\n\n```js\nonClick(e) {\n  e.preventDefault();\n  this.props.flux.getActions('actionsKey').someAction();\n}\n```\n\nCustom rendering\n----------------\n\nWith 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:\n\n```js\n// Using children\n<FluxComponent connectToStores={{\n  posts: store => ({\n    post: store.getPost(this.props.postId),\n  })\n}}>\n  <InnerComponent />\n</FluxComponent>\n\n// Using custom `render` function\n<FluxComponent\n  connectToStores={{\n    posts: store => ({\n      post: store.getPost(this.props.postId),\n    })\n  }}\n  render={storeState => {\n    // Render whatever you want\n    return <InnerComponent {...storeState} />;\n  }}\n/>\n```\n\nProps\n-----\n\n### `flux`\n\nIndicates the [Flux instance](flux.md) 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.\n\n### `connectToStores`\n\nThis prop has the same effect as passing the first argument to [fluxMixin](fluxmixin.md)'s `connectToStores()`.\n\n### `stateGetter`\n\nThis prop has the same effect as passing the second argument to [fluxMixin](fluxmixin.md)'s `connectToStores()`.\n\n### `render`\n\nOptionally overrides the rendering function, useful to control what state is passed down as props to components.\n"}