Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
inferno-fluxible
Advanced tools
Readme
Connector for inferno-js and fluxible-js. See demo.
npm i -s inferno-fluxible fluxible-js redefine-statics-js
import { initializeStore } from 'fluxible-js';
initializeStore({
initialStore: {
user: {
name: 'Test User'
},
anotherState: 'value'
}
});
// rest of the app.
Before you render your app, you MUST call initializeStore
. It expects an object as the only parameter, the object have a required property called initialStore
which will be used as the initial value of the store.
There's also the optional property called persist
which MUST also be an object containing two required properties. Learn more about fluxible-js.
import { mapStatesToProps } from 'inferno-fluxible';
class MyComponent extends Component {
render() {
return (
<div>
<p>{this.props.user.name}</p>
</div>
);
}
}
export default mapStatesToProps(MyComponent, states => {
return {
user: state.user
};
});
mapStatesToProps
has two parameters. (1) The component itself. (2) A callback function that must return the states you want to be available as props
in that component.
You can choose between using the event bus or calling updateStore directly from the component.
import { updateStore } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';
class MyComponent extends Component {
handleClick = () => {
updateStore({
anotherState: 'newValue'
});
};
render() {
return (
<div>
<p>{this.props.user.name}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
export default mapStatesToProps(MyComponent, states => {
return {
user: state.user,
anotherState: state.anotherState
};
});
You can also build a function yourself that would perform what you need to do.
import { updateStore } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';
import { doSomething } from '../mutations';
class MyComponent extends Component {
render() {
return (
<div>
<p>{this.props.user.name}</p>
<button onClick={doSomething}>Click me</button>
</div>
);
}
}
export default mapStatesToProps(MyComponent, states => {
return {
user: state.user,
anotherState: state.anotherState
};
});
This is better compared to how connect
used to do it. This is more flexible, manageable, and performant. You don't need to make a lot of function calls when you can simply import updateStore
and getStore
pretty much wherever you want. The only purpose of mapStatesToProps
provided by inferno-fluxible
is to make sure that the components receive the latest store when the store is updated.
Somewhere in your source code, ideally before emitting this event:
import { addEvent, updateStore } from 'fluxible-js';
addEvent('my-event', payload => {
console.log(payload);
updateStore({
anotherState: payload
});
});
On your component:
import { emitEvent } from 'fluxible-js';
import { mapStatesToProps } from 'inferno-fluxible';
class MyComponent extends Component {
handleClick = () => {
emitEvent('my-event', 'newValue');
};
render() {
return (
<div>
<p>{this.props.user.name}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
export default mapStatesToProps(MyComponent, states => {
return {
user: state.user,
anotherState: state.anotherState
};
});
Discussions, questions, suggestions, bug reports, feature request, etc are all welcome. Just create an issue. Just ensure that you are responsive enough.
Created with :heart: by April Mintac Pineda.
FAQs
Connector for inferno-js and fluxible-js.
We found that inferno-fluxible demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).