Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 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 (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T20:14:41.000Z (almost 2 years ago)
- Last Synced: 2024-05-11T20:40:50.140Z (9 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