https://github.com/vanilla-icecream/reselect-computed
Declaratively created computed properties for Redux and Reselect.
https://github.com/vanilla-icecream/reselect-computed
redux reselect
Last synced: about 1 month ago
JSON representation
Declaratively created computed properties for Redux and Reselect.
- Host: GitHub
- URL: https://github.com/vanilla-icecream/reselect-computed
- Owner: Vanilla-IceCream
- Created: 2018-02-18T06:17:29.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T11:48:27.000Z (over 4 years ago)
- Last Synced: 2024-12-22T10:34:18.578Z (over 1 year ago)
- Topics: redux, reselect
- Language: JavaScript
- Homepage:
- Size: 35.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reselect-computed [](https://travis-ci.org/Vanilla-IceCream/reselect-computed) [](https://coveralls.io/github/Vanilla-IceCream/reselect-computed?branch=master)
Declaratively created computed properties for Redux and Reselect.
## Installation and Usage
### CJS or ESM
```bash
$ npm i reselect-computed -S
# or
$ yarn add reselect-computed
```
```js
// commonjs
const { bindSelectCreators } = require('reselect-computed');
// es modules
import { bindSelectCreators } from 'reselect-computed';
```
## Getting Started
```js
// types.js
// @flow
export interface ICounter {
value: number;
}
export interface Props {
counter: ICounter;
actions?: Object;
selectors?: Object;
}
```
```js
// constants.js
// @flow
import { ICounter } from './types';
export const INITIAL: ICounter = {
value: 0,
};
```
```js
// selectors.js
// @flow
import { createSelector } from 'reselect';
import { ICounter } from './types';
export const evenOrOdd = createSelector(
(counter: ICounter): ICounter => counter,
({ value }: ICounter): string => (value % 2 === 0 ? 'even' : 'odd'),
);
```
```js
// Counter.js
// @flow
import React from 'react';
import { bindActionCreators } from 'redux';
import { bindSelectCreators } from 'reselect-computed';
import { connect } from 'react-redux';
import { compose, lifecycle } from 'recompose';
import { Props } from './types';
import * as actions from './actions';
import * as selectors from './selectors';
export const Counter = ({ counter, actions, selectors }: Props): React.Element => (
Increment
Clicked: {counter.value} times, value is {selectors.evenOrOdd}.
{`
.typography {
padding: 0.25rem 0;
}
`}
);
export const mapStateToProps = ({ counter }) => ({
counter,
selectors: bindSelectCreators(selectors, counter),
});
export const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions, dispatch),
});
export default compose(
connect(mapStateToProps, mapDispatchToProps),
lifecycle({
componentDidMount() {
console.log('Counter is ready.');
},
}),
)(Counter);
```