All Projects → jedireza → Flux Constant

jedireza / Flux Constant

Licence: mit
📦 Unique constants for Flux apps

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Flux Constant

Reactjs101
從零開始學 ReactJS(ReactJS 101)是一本希望讓初學者一看就懂的 React 中文入門教學書,由淺入深學習 ReactJS 生態系 (Flux, Redux, React Router, ImmutableJS, React Native, Relay/GraphQL etc.)。
Stars: ✭ 4,004 (+22144.44%)
Mutual labels:  flux
Redux Api
Flux REST API for redux infrastructure
Stars: ✭ 502 (+2688.89%)
Mutual labels:  flux
Iosdesignpatternsamples
This is Github user search demo app which made by many variety of design patterns. You can compare differences in MVC, MVP, MVVM and Flux.
Stars: ✭ 622 (+3355.56%)
Mutual labels:  flux
Gank
干货集中营 app 安卓实现,基于 RxFlux 架构使用了 RxJava、Retrofit、Glide、Koin等
Stars: ✭ 444 (+2366.67%)
Mutual labels:  flux
Almin
Client-side DDD/CQRS for JavaScript.
Stars: ✭ 477 (+2550%)
Mutual labels:  flux
React Native Nw React Calculator
Mobile, desktop and website Apps with the same code
Stars: ✭ 5,116 (+28322.22%)
Mutual labels:  flux
Dynamic Dark Mode
The smart, automatic Dark Mode toggle for macOS Mojave+
Stars: ✭ 397 (+2105.56%)
Mutual labels:  flux
Nylas Mail
💌 An extensible desktop mail app built on the modern web. Forks welcome!
Stars: ✭ 24,653 (+136861.11%)
Mutual labels:  flux
Microcosm
Flux with actions at center stage. Write optimistic updates, cancel requests, and track changes with ease.
Stars: ✭ 484 (+2588.89%)
Mutual labels:  flux
Typescript Fsa
Type-safe action creator utilities
Stars: ✭ 588 (+3166.67%)
Mutual labels:  flux
Normalizr
Normalizes nested JSON according to a schema
Stars: ✭ 20,721 (+115016.67%)
Mutual labels:  flux
Nylas Mail
💌 An extensible desktop mail app built on the modern web.
Stars: ✭ 473 (+2527.78%)
Mutual labels:  flux
Model Zoo
Please do not feed the models
Stars: ✭ 580 (+3122.22%)
Mutual labels:  flux
React Native Train
I use this book to train my team, help them to know how to build React-native app in the right way.
Stars: ✭ 407 (+2161.11%)
Mutual labels:  flux
React Quick Tutorial
🚀 讓你用最短時間,充分體會 React 的脈絡思維
Stars: ✭ 633 (+3416.67%)
Mutual labels:  flux
Dutier
The immutable, async and hybrid state management solution for Javascript applications.
Stars: ✭ 401 (+2127.78%)
Mutual labels:  flux
Reatom
State manager with a focus of all needs
Stars: ✭ 567 (+3050%)
Mutual labels:  flux
Delorean
An Agnostic, Complete Flux Architecture Framework
Stars: ✭ 748 (+4055.56%)
Mutual labels:  flux
Little State Machine
📠 React custom hook for persist state management
Stars: ✭ 654 (+3533.33%)
Mutual labels:  flux
Beauty Vuejs Boilerplate
❤️ Real world base Vue.js app. Access/refresh tokens auth, api services, http client, vuex modules
Stars: ✭ 583 (+3138.89%)
Mutual labels:  flux

flux-constant

Unique constants for Flux apps.

Build Status devDependency Status

Install

$ npm install flux-constant

Usage

Create constants one at a time.

var FluxConstant = require('flux-constant');

var IMPORTANT_THING = new FluxConstant('IMPORTANT_THING');

console.log(IMPORTANT_THING);
// { name: 'IMPORTANT_THING' }

console.log(IMPORTANT_THING.toString());
// IMPORTANT_THING

Or create a set of them.

var FluxConstant = require('flux-constant');

var Set = FluxConstant.set([
    'SEND_REQUEST',
    'RECEIVE_RESPONSE'
]);

console.log(Set);
/*
{
    SEND_REQUEST: { name: 'SEND_REQUEST' },
    RECEIVE_RESPONSE: { name: 'RECEIVE_RESPONSE' }
}
*/

console.log(Set.SEND_REQUEST instanceof FluxConstant);
// true

Why

With a Flux application you may have a set of constants such as:

var ContactConstants = {
    ActionTypes: {
        SEND_REQUEST: 'SEND_REQUEST',
        RECEIVE_RESPONSE: 'RECEIVE_RESPONSE'
    }
};

module.exports = ContactConstants;

You may have another set of constants that are really similar, but unreleated.

var SignupConstants = {
    ActionTypes: {
        SEND_REQUEST: 'SEND_REQUEST',
        RECEIVE_RESPONSE: 'RECEIVE_RESPONSE'
    }
};

module.exports = SignupConstants;

We just created action types that could collide though. Let's compare a bit:

var ContactConstants = require('./ContactConstants');
var SignupConstants = require('./SignupConstants');

ContactActionTypes = ContactConstants.ActionTypes;
SignupActionTypes = SignupConstants.ActionTypes;

console.log(ContactActionTypes.SEND_REQUEST === SignupActionTypes.SEND_REQUEST);
// true

That's not exactly what we wanted. This could bite us if we use these two sets of constants in the same process.

For example, if a Flux store was depending on these constants, it may take action on a payload it didn't intend to. This happens because we're just comparing strings.

One way to fix this is creating longer, more unique names:

var ContactConstants = {
    ActionTypes: {
        CONTACT_SEND_REQUEST: 'CONTACT_SEND_REQUEST',
        CONTACT_RECEIVE_RESPONSE: 'CONTACT_RECEIVE_RESPONSE'
    }
};

module.exports = ContactConstants;

This doesn't seem like a great way to move forward though. These names can get out of control as the application grows. Also, prefixing with CONTACT_ feels like duplicating unnecessary information.

So instead of passing around strings let's create objects that are unique (new). And best of all we can keep the simpler naming conventions.

var FluxConstant = require('flux-constant');

var ContactConstants = {
    ActionTypes: {
        SEND_REQUEST: new FluxConstant('SEND_REQUEST'),
        RECEIVE_RESPONSE: new FluxConstant('RECEIVE_RESPONSE')
    }
};

module.exports = ContactConstants;

We'll do the same thing as above but demonstrate the set shortcut.

var FluxConstant = require('flux-constant');

var SignupConstants = {
    ActionTypes: FluxConstant.set([
        'SEND_REQUEST',
        'RECEIVE_RESPONSE'
    ])
};

module.exports = SignupConstants;

And now they won't collide.

var ContactConstants = require('./ContactConstants');
var SignupConstants = require('./SignupConstants');

ContactActionTypes = ContactConstants.ActionTypes;
SignupActionTypes = SignupConstants.ActionTypes;

console.log(ContactActionTypes.SEND_REQUEST === SignupActionTypes.SEND_REQUEST);
// false

License

MIT

Don't forget

What you create with flux-constant is more important than flux-constant.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].