https://github.com/today-/effector-react-inject

Inject Effector's state to React components simple way
https://github.com/today-/effector-react-inject

decorator effector react

Last synced: about 2 months ago
JSON representation

Inject Effector's state to React components simple way

• Host: GitHub
• URL: https://github.com/today-/effector-react-inject
• Owner: today-
• Created: 2019-03-05T09:03:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-02T20:14:41.000Z (over 1 year ago)
• Last Synced: 2024-05-11T20:40:50.140Z (4 months ago)
• Topics: decorator, effector, react
• Language: TypeScript
• Size: 31.3 KB
• Stars: 11
• Watchers: 4
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Effector-react-inject

Inject [Effector](https://github.com/zerobias/effector)'s state to React components simple way

## Usage

#### Connecting to React components

```jsx harmony

export const Todos = inject({ todos, user })(TodoList);

```

`TodoList` component then will receive `todos` and `user` props with state from `todos` and `user` effector stores respectively.

#### Connecting to React class components using decorators

```jsx harmony

@inject({ todos, user })

export class TodoList extends React.Component {

```

[Babel decorators](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)

[TypeScript decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)

#### TypeScript declarations

```typescript jsx

import { inject, Injected } from 'effector-react-inject';

const stores = { todos, user };

type TodoListProps = OwnProps & Injected;

class TodoList extends React.Component {

```

### Motivation

- Classic `redux-connect`-like HOC syntax, can be easily composed.

- Less dependent on Effector's core API, especially if injecting multiple stores.

- Can be used as a decorator for React class components

- Wrappable components can be tested separately