nanoflux-react
Provides High Order Components for convenient usage of nanoflux and/or nanoflux-fusion with ReactJS.
Basically, it turns action functions and store states into properties for underlying components, and establish the store update binding, such that the properties are updated automatically on state store changes.
Installation
npm install nanoflux-react --save
or yarn add nanoflux-react
This package requires React installed in your project (peer dependency)
How to use
First of all, you need to set up nanoflux as usual, e.g.
let testState = test1: 'initial' test2: 'initial'; // state selectorsconst getTest1State = testStatetest1;const getTest2State = testStatetest2; // --- STORE CONFIGURATIONconst storeDescriptor = { testStatetest1 = arg; this; } { testStatetest2 = arg; this; }; // connect stores to dispatcherNanoflux; // --- ACTION CREATOR const actionDescriptor = { this; // automatically maps to 'onTestAction1' of store } { this; }; // connect actionsNanoflux;
Afterwards, you can enhance your target component with the automatic store/action property binding.
Store Connections
// our target componentconst Test = props <h2>Test ``</h2> // uses mapped property
// maps store state to propertyconst mapStatesToProps = // maps store state to property 'test1Prop' ; // establish binding between selected Store and target componentconst connectedComponent = Test; // now you can use `connectedComponent` as a normal React component, it will be updated automatically, each time// the `testStore's` state was changed...the connected component receives the mapped states as properties.
It is highly recommended to follow the 'Dumb-Smart-Component'-pattern.
Action Connections
Component { ; thisonClick = thisonClick; } { // mapped actions are available under `props.actions` thispropsactions; } { return <button =>Click me!</button> } // `actions` are the actions from 'testActions' const mapActionsToProps = actions doAction: actionstestAction1 // maps `testAction1` to property `testAction1` // ... map more, if needed; // establish binding between mapped actions and target componentconst testComponent = Test;
Multiple Actions and Stores
nanoflux-react uses High Order Components, which makes it possible to compose the components easily. Using composition multiple ActionCreators and Stores can be combined and applied for the target element.
To connect a component to multiple stores you simply chain the High Order Components:
const connectedAppComponent = App ;
For a complete example you may look at Nanoflux React Demo
How to use with nanoflux-fusion
With nanoflux-fusion it's even easier to use nanoflux-react, as nanoflux-fusion works with a single store only. When using Fusion two details are different:
- Pass the store as object instead of its name for
connect
- As there is no action provider you need to use the FusionActors directly for action mapper
// --------- Begin Fusion Setup ------------------ ; // create a 'Fusionator' (aka reducer)NanofluxFusion; // gets the only one storeconst Store = NanofluxFusion; // define state selectorsconst getTest1State = Storetest1;const getTest2State = Storetest2; // --------- End Fusion Setup ------------------ // in your components file // here's the same as with normal nanofluxconst mapStatesToProps = ; // here we use the getFusionActor method.const mapActionsToProps = testAction1: NanofluxFusion; // enhancing your componentconst enhancedComponent = // for action mapping no action provider is necessary, nor available! // you can pass the store as object, too YourComponent ;
To do
- Update Project Site's doc