Comments (4)
@armand1m: Your suggestion makes sense, and adopting that kind of convention for Component modules can lead to more maintainable tests.
Actually, the current observe
can already do this:
import React from 'react';
import { observe } from 'frint-react';
export const mapAppToProps = app => ({
foo: app.get('foo'),
});
function MyComponent({ foo }) {
return <p></p>;
};
export default observe(mapAppToProps)(MyComponent);
One thing that observe
doesn't do is giving you access to received props synchronously (it gives you access to parent props as an Observable). That's a problem for people who don't want to get into RxJS. Something we could solve with a new withApp
function may be without having to break observe
HoC's API.
from frint.
@fahad19: Agreed. The API would be pretty straight-forward in that sense,
from frint.
/cc @leandrooriente, @rbardini, @juliamaksimchik
from frint.
I was speaking to @noisae and after some discussion, we thought that an API similar to redux connect
would be nice since we could map what we do actually need from the App instead of injecting the whole App always.
This encourages developers using Frint to actually be more specific about what do they actually need from the App instead of relying on the whole app always.
Obviously the developer will still be able to do so, which there is also use cases that we don't have in mind, but implementing this can actually lead us to a path where we can encourage it and know more about what people actually use from their apps.
Perhaps something like:
/** ./MyComponent.js */
import React from 'react';
import FlightSearchStorePropType from '@prop-types/FlightSearchStorePropType';
import CheckoutStorePropType from '@prop-types/CheckoutStorePropType';
import { withApp } from 'frint-react';
const MyComponent = ({
flightSearchStore,
checkoutStore,
}) => (
// render logic
);
MyComponent.propTypes = {
flightSearchStore: FlightSearchStorePropType.isRequired,
checkoutStore: CheckoutStorePropType.isRequired,
};
export const mapAppToProps = app => ({
flightSearchStore: app.get('flightSearchStore'),
checkoutStore: app.get('checkoutStore'),
});
export default withApp(mapAppToProps)(MyComponent);
This is also good since it makes it easier to test. You can export the mapAppToProps
method and validate if it is calling the right resolvers for the expected providers.
/** ./MyComponent.test.js */
import { mapAppToProps } from './MyComponent';
const appMock = {
get: jest.fn().mockImplementation(name => name),
};
describe('mapAppToProps', () => {
it('should call correct resolvers', () => {
mapAppToProps(appMock);
expect(appMock.get).toBeCalledWith('flightSearchStore', 'checkoutStore');
});
it('should map to correct props' () => {
const props = mapAppToProps(appMock);
expect(props.flightSearchStore).toBe('flightSearchStore');
expect(props.checkoutStore).toBe('checkoutStore');
});
});
from frint.
Related Issues (20)
- TypeScript: Region component not found HOT 4
- TypeScript: Missing combineEpics declaration in frint-store HOT 1
- Migrate to TypeScript
- Proposal: Evolution HOT 4
- frint-react: Move subscription to componentDidMount in `observe` HoC HOT 1
- Extract component handlers packages out of monorepo
- Move lodash to peerDependencies to avoid multiple imports to bundle file. HOT 4
- Proposal: Check availability of multiple Apps HOT 1
- Proposal: Expose class methods on the app instance level
- Proposal: Region component with render prop support
- Proposal: App registration upon availability of other Apps
- Proposal: MountApp component
- Maintenance: Upgrade to React v16 HOT 4
- Method interface should accept arguments
- Project still alive? HOT 2
- How to make frint work with custom elements or custom element lib (lit-html, atomico etc)?
- Frint Web App crashes during Browser refresh
- There are conflicts when execute npm install HOT 1
- User is redirected to the wrong link that is on the docs page of the frintjs.org HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frint.