Fluxible-JS v6
Smaller, faster, better event-driven state management architecture that supports asynchronicity and state persistence out of the box with no extra code.
Change logs
From 5.0.10, the changelogs on the project will be kept in CHANGELOG, which follows keepachangelog.
Demo
https://user-images.githubusercontent.com/21032419/139810793-ba875041-133e-4087-b80f-a523213e974d.mp4
Run me
git clone git@github.com:aprilmintacpineda/fluxible-js.git
yarn
yarn test
Install
yarn add fluxible-js
Usage
import { createStore } from 'fluxible-js';
const initialStore = {
user: null,
someOtherState: 'value',
anotherState: {
value: 'value'
}
};
const store = createStore({
initialStore,
persist: {
useJSON: false,
syncStorage: window.localStorage,
restore: savedStore => ({
user: savedStore.user
})
}
});
Creating a store
import { createStore } from 'fluxible-js';
const initialStore = {
user: null,
someOtherState: 'value',
anotherState: {
value: 'value'
}
};
const myStore = createStore({ initialStore });
createStore
function returns an instance of a store
that has variety of methods in it. You can access the store's current value by via myStore.store
.
Persisting states
Persisting states allows you to save your application's state to a storage on the local device and then reuse those states the next time your application starts.
You need to tell fluxible-js
which storage to use, a storage API must have a getItem
and setItem
methods in them. An example of this would be window.localStorage
.
You also need to tell fluxible-js
which states to persist, you can do this via the restore
callback function.
Using asynchronous storage
Storage like react-native-async-storage or LocalForage. These are storage that return a Promise
for the setItem
and getItem
methods.
import { createStore } from 'fluxible-js';
const initialStore = {
token: null,
isLoggedIn: false
};
const store = createStore({
initialStore,
persist: {
asyncStorage: RNAsyncStorage,
restore: (savedStore) => {
return {
token: savedStore.token
};
}
}
});
Using synchronous storage
Storage like window.localStorage
. These are storage that doesn't return a Promise
for their getItem
and setItem
methods.
import { createStore } from 'fluxible-js';
const initialStore = {
token: null,
isLoggedIn: false
};
const store = createStore({
initialStore,
persist: {
syncStorage: window.localStorage,
restore: (savedStore) => {
return {
token: savedStore.token
};
}
}
});
Updating the store
You can update the store by doing:
import { createStore } from 'fluxible-js';
const initialStore = {
token: null,
isLoggedIn: false
};
const store = createStore({
initialStore,
persist: {
syncStorage: window.localStorage,
restore: (savedStore) => {
return {
token: savedStore.token
};
}
}
});
store.updateStore({
token: userToken,
isLoggedIn: true
});
Adding observers
Observers are callback functions that listen to certain changes in your store. Observers will be called AFTER the store has been updated and they will receive the updated store. You can add an observer by doing:
import { createStore } from ".";
const store = createStore({
initialStore: {
token: null
}
});
store.addObserver(
(store) => {
console.log(store.token);
},
['token']
);
Observers will only be called when the state they are watching changes, in this case, the observer is only watching token
, so this observer will only be called when you do store.updateStore({ token })
. This prevents unnecessary calls to all observers when other states changes.
Events
You can add, emit, and remove events in your store. You can take advantage of events to do various things in your applications such as updating the store.
Adding events
import { createStore } from ".";
const store = createStore({
initialStore: {
token: null
}
});
const unsubscribeCallback = store.addEvent('test-event', (payload, store, event) => {
console.log(payload, store, event);
});
unsubscribeCallback();
There is also addEvents
in case you want an event listener to listen to multiple events.
const unsubscribeCallback = store.addEvents(
['event1', 'event2', 'event3'],
(payload, store, event) => {
console.log(payload, store, event);
}
);
unsubscribeCallback();
Emitting an event
store.emitEvent(
'event1',
{ value: 1 }
);
Emitting multiple events
store.emitEvents(
['anEvent', 'anotherEvent'],
{ value: 1 }
);
Removing an event
store.removeEvent('event1');
Removing multiple events
store.removeEvents(['anEvent', 'anotherEvent']);
Migrating from v5 to v6
The only changes that occured in v6 are the following:
- Used TypeScript for better coding experience.
- Changed architecture to be more self-contained.
- No more
-1
returns.
Your code should still work with minimal changes. Here's how you can migrate real quick.
Create a file called globalStore.ts
, and add the following code:
import { createStore } from 'fluxible-js';
const initialStore = {
};
export default createStore({
initialStore,
});
Now, change all occurences of import { updateStore } from 'fluxible-js';
and other similar imports to import { updateStore } from 'globalStore';
.