> For the complete documentation index, see [llms.txt](https://event-flux.gitbook.io/event-flux/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://event-flux.gitbook.io/event-flux/usage-with-react.md).

# Usage with React

We will use React to build our simple app, and cover the basics of how to use React with `event-flux`.

## Installing React event-flux

React bindings are not included in `event-flux` by default. You need to install them explicitly:

```bash
npm install --save react-event-flux
```

## Basic Example

```javascript
import { StoreBase } from "event-flux";

export default class CounterStore extends StoreBase {
  constructor(appStore) {
    super(appStore);
    this.state = { counter: 0 };
  }

  increment() {
    this.setState({ counter: this.state.counter + 1 });
  }

  decrement() {
    this.setState({ counter: this.state.counter - 1 });
  }
}
```

First we create CounterStore to handle counter state.

```javascript
import { AppStore, declareStore } from "event-flux";
import { Provider } from "react-event-flux";
import CounterStore from "./CounterStore";

let appStore = new AppStore([declareStore(CounterStore)]).init();

function App() {
  return (
    <Provider appStore={appStore}>
      <TodoApp />
    </Provider>
  );
}
```

Then we create AppStore instance with declaring `CounterStore` and pass this AppStore instance to Provider.

```javascript
import React from "react";
import { withEventFlux } from "react-event-flux";

class Counter extends React.PureComponent {
  render() {
    return <div>Now the counter is {this.props.counter}</div>;
  }
}

export default withEventFlux({ counterStore: ["counter"] })(Counter);
```

Now we can inject some stores and states to Counter component. For `withEventFlux(eventFluxArgs)`, The key of `eventFluxArgs` is the store key that will be injected, so `counterStore` will be loaded. The value of `eventFluxArgs` is state filter that stand for what shape of state can be injected. The `["counter"]` filter represent that counterStore's `counter` state will be injected and other states in `counterStore` will be ignored.