# fauxflux-react

> React bindings for FauxFlux

Latest version **1.0.0** (published 2017-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install fauxflux-react
pnpm add fauxflux-react
yarn add fauxflux-react
bun add fauxflux-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-10-27 |
| First published | 2016-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Morgan Kartchner |
| Maintainers | mkartchner994 |
| Keywords | FauxFlux, React |

## Links

- npm: https://www.npmjs.com/package/fauxflux-react
- Repository: https://github.com/FauxFlux/fauxflux-react
- Homepage: https://github.com/FauxFlux/fauxflux-react#readme
- Issues: https://github.com/FauxFlux/fauxflux-react/issues
- npm.io page: https://npm.io/package/fauxflux-react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-10-27
- 0.1.4 — 2016-08-17
- 0.1.3 — 2016-07-05
- 0.1.2 — 2016-07-01
- 0.1.1 — 2016-07-01
- 0.1.0 — 2016-06-28

## README

# FauxFlux-React
React bindings for [FauxFlux](https://github.com/FauxFlux/fauxflux)

This package provides a `<FauxFluxProvider/>` and a `connect` decorator to make working with [FauxFlux](https://github.com/FauxFlux/fauxflux) easier with React.

The `connect` decorator uses the React context api behind the scenes to give any compoenet wrapped in `connect` the `this.store` and `this.dispatch` properties.

However, the `this.store` and `this.dispatch` properties will not be added to the component until the `componentWillMount` lifecycle method so you wont be able to call them in a components constructor method if the component is defined as a JavaScript class. Wait to call them in the `componentWillMount` lifecycle method instead.

```js
@connect
class MessageList extends React.Component {
  constructor(props) {
    super(props);
    // will throw an error
    this.dispatch('fetch_stuff');
  }
  
  componentWillMount() {
    // will fetch stuff
    this.dispatch('fetch_stuff');
  }
  
  render() {
    return (
      // ...  
    );
  }
}
```

### Example Chat App
```js
import React from 'react';
import ReactDOM from 'react-dom';
import FauxFlux from 'fauxflux';
import { FauxFluxProvider, connect } from '../index';

// Generate a random username for this example
let randomUserName = `User${( Math.floor(Math.random() * 100000) + 1  )}`;

let store = {
  name: randomUserName,
  messageText: '',
  messages: [] // array of objects like { name: 'Billie Jean', message: 'She says I am the one' }
};

let actions = [
  {
    name: 'update_message_text',
    action({store}, payload) {
      store.messageText = payload;
    }
  },
  {
    name: 'received_new_message',
    action({store}, message) {
      store.messages.push(message);
    }
  },
  {
    name: 'send_message',
    action({store}) {
      let newMessage = {name: store.name, message: store.messageText};
      // Simulated ajax request to some server
      setTimeout(() => {
        store.messages.push(newMessage);
        store.messageText = '';
      }, 100);
    }
  }
]

let FF = new FauxFlux(store, actions);

@connect
class MessageTextBox extends React.Component {
  constructor(props) {
    super(props);
    
    this._handleChange = this._handleChange.bind(this);
    this._sendMessage = this._sendMessage.bind(this);
  }
  
  _handleChange(e) {
    e.preventDefault();
    this.dispatch('update_message_text', e.target.value);
  }

  _sendMessage(e) {
    e.preventDefault();
    this.dispatch('send_message');
  }
  
  render() {
    return (
      <form onSubmit={this._sendMessage}>
        <input value={this.store.messageText} onChange={this._handleChange} />
        <button>Send</button>
      </form>
    );
  }
}

@connect
class MessageList extends React.Component {
  render() {
    return (
      <ul>
        {this.store.messages.map((message, index) => 
          <li key={index}>{message.name} - {message.message}</li>
        )}
      </ul>
      );
  }
}

// This component wont need an @connect decorator because there is nothing
// directly in the store it relies on.
class App extends React.Component {
  render() {
    return (
      <div>
        <MessageTextBox />
        <MessageList />
      </div>
    );
  }
}

ReactDOM.render(
  <FauxFluxProvider FF={FF}>
      <App/>
  </FauxFluxProvider>,
  document.getElementById('app')
);
```

---
_Source: https://npm.io/package/fauxflux-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._