Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pswai/ember-simple-redux
React-redux-compatible way to use Redux in Ember applications
https://github.com/pswai/ember-simple-redux
ember ember-addon react-redux redux
Last synced: about 1 month ago
JSON representation
React-redux-compatible way to use Redux in Ember applications
- Host: GitHub
- URL: https://github.com/pswai/ember-simple-redux
- Owner: pswai
- License: mit
- Created: 2018-07-27T05:47:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-02T14:38:08.000Z (over 4 years ago)
- Last Synced: 2024-10-29T01:14:22.723Z (about 2 months ago)
- Topics: ember, ember-addon, react-redux, redux
- Language: JavaScript
- Size: 9.49 MB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ember-simple-redux
[](https://travis-ci.org/pswai/ember-simple-redux)
[](https://www.npmjs.com/package/ember-simple-redux)
[](https://github.com/prettier/prettier) [](https://greenkeeper.io/)
`react-redux`-compatible way to use Redux in Ember applications.
## Installation
```
ember install ember-simple-redux
```
## Usage
`ember-simple-redux` provides a very similar interface with the ones provided by `react-redux`.
Whatever you have learned for `react-redux` can be applied here. This is
especially useful if you are migrating Ember to React since your `connect()`
codes is now framework-agnostic!
Check the API section!
### Basic Usage
```javascript
import { connect } from 'ember-simple-redux';
import TodoList from 'my-app/components/todo-list';
const mapStateToProps = state => ({
todos: state.todos,
});
export default connect(mapStateToProps)(TodoList);
```
### Default Props
In React, defining default props is as straightforward as adding `defaultProps`
to the React component. In Ember, default props are defined directly to the
components. This remains working after `connect()`.
```javascript
// React
const SayHi = props => `Hi, ${props.name}!`;
SayHi.defaultProps = {
name: 'Guest',
};
// Ember
const SayHi = Ember.Component.extend({
name: 'Guest',
});
```
However, remember that `connect()` creates a higher-order component, so this
does not apply to the connected component. To supply default props, we support
defining `defaultProps` directly on the connected component.
```javascript
const mapStateToProps = (state, ownProps) => ({
name: state.users[ownProps.id].name,
});
const Connected = connect()(SayHi);
Connected.defaultProps = {
id: 2,
};
export default Connected;
```
For more info, check out [this issue](https://github.com/reduxjs/react-redux/issues/633#issuecomment-299768271).
## API
Since the goal of `ember-simple-redux` is to provide an interface as close as
possible to `react-redux`, this documentation is heavily inspired by the
[documentation](https://github.com/reduxjs/react-redux/blob/master/docs/api.md)
of `react-redux`. In fact, most examples are exactly the same (except the
import).
### `provider(store, application)`
`react-redux`: [Documentation](https://github.com/reduxjs/react-redux/blob/master/docs/api.md#provider-store)
Similar to `Provider` in `react-redux`, `provider()` function makes the Redux
store available to the `connect()` calls in Ember application.
Notice that this function starts with lower case because it is not a React
component.
The best place to use this function is in an application initializer, which
should already be generated by `ember-simple-redux`.
#### Arguments
- [`store`] _(Redux Store)_: The single Redux store in your application
- `application`: The instantiated Ember application
#### Examples
```javascript
// app/initializers/redux.js
import { provider } from 'ember-simple-redux';
import { createStore } from 'redux';
export function initialize(application) {
const store = createStore(() => {});
provider(store, application);
}
export default {
initialize,
};
```
### `connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
`react-redux`: [Documentation](https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
This function is almost completely identical with the one provided by
`react-redux`, please check the documentation of `react-redux` for its usage.
The differences with its `react-redux` counterpart:
- Default `storeKey` is changed to `simpleReduxStore` to avoid possible conflict
with Ember-Data Store
- This function returns a "higher-order Ember component"
### `connectAdvanced(selectorFactory, [connectOptions])`
`react-redux`: [Documentation](https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectadvancedselectorfactory-connectoptions)
This is the major difference with `react-redux` since it interacts with Ember
directly. However, its interface still remains as close as possible.
The differences with its `react-redux` counterpart:
- Default `storeKey` is changed to `simpleReduxStore` to avoid possible conflict
with Ember-Data Store
- `withRef` and `getWrappedInstance()` do not work since they are React-specific
- There is no `WrappedComponent` static properties
- This function returns a "higher-order Ember component"
### `createProvider([storeKey])`
`react-redux`: [Documentation](https://github.com/reduxjs/react-redux/blob/master/docs/api.md#createproviderstorekey)
This can be used when you are in the inadvisable position of having multiple
stores.
It can also be used if the default `storeKey` conflicts with your existing
[injection](https://emberjs.com/api/ember/3.3/classes/Application/methods/inject?anchor=inject).
This is a very rare case since the default `storeKey` has been changed to
`simpleReduxStore`, instead of `store` that is commonly used by legacy Ember
applications to reference Ember-Data Store.
#### Arguments
- [`storeKey`] _(String)_: The key of the component on which to set the store. Default
value: `'simpleReduxStore'`
#### Examples
As reminded in `react-redux`, before creating multiple stores, please go through
this FAQ: [Can or should I create multiple stores?](http://redux.js.org/docs/faq/StoreSetup.html#can-or-should-i-create-multiple-stores-can-i-import-my-store-directly-and-use-it-in-components-myself)
```javascript
import { connect, createProvider } from 'ember-simple-redux';
const STORE_KEY = 'componentStore';
// `provider` in `ember-simple-redux` is not a React component
export const provider = createProvider(STORE_KEY);
function connectExtended(
mapStateToProps,
mapDispatchToProps,
mergeProps,
options = {}
) {
options.storeKey = STORE_KEY;
return connect(
mapStateToProps,
mapDispatchToProps,
mergeProps,
options
);
}
export { connectExtended as connect };
```
Now the new `provider` and `connect` should be used instead.
## Prior Arts
- [ember-redux](https://github.com/ember-redux/ember-redux)
- [ember-cli-redux](https://github.com/AltSchool/ember-cli-redux)
## Contributing
### Installation
- `git clone `
- `cd ember-simple-redux`
- `yarn install`
### Linting
- `yarn lint:js`
- `yarn lint:js --fix`
### Running tests
- `ember test` – Runs the test suite on the current Ember version
- `ember test --server` – Runs the test suite in "watch mode"
- `ember try:each` – Runs the test suite against multiple Ember versions
### Running the dummy application
- `ember serve`
- Visit the dummy application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
## License
This project is licensed under the [MIT License](LICENSE.md).
## Credits
Great thanks to the contributors of [`react-redux`](https://github.com/reduxjs/react-redux),
this addon has borrowed a huge part of heavy lifting components from it.