View Source Storex
Frontend store with the state on the backend. You are able to mutate store state from the frontend and also from the backend. Whole communication going through WebSocket.
Important: Storex is under active development. Report issues and send proposals here.
Only diff of the store state is being sent on each mutation.
basic-usage
Basic usage
installation
Installation
Add storex to deps in mix.exs
:
defp deps do
[{:storex, "~> 0.2.3"}]
end
Also you need to add storex to package.json
dependencies:
{
"storex": "file:../deps/storex",
}
add-storex-websocket-handler
Add storex websocket handler
You need to add handler Storex.Socket.Handler
to cowboy dispatch.
Phoenix: Example based on Phoenix guides
config :exampleapp, ExampleApp.Endpoint,
http: [
dispatch: [
{:_,
[
{"/storex", Storex.Socket.Handler, []},
{:_, Phoenix.Endpoint.Cowboy2Handler, {ExampleApp.Endpoint, []}}
]}
]
]
Cowboy:
:cowboy_router.compile([
{:_, [
# ...
{"/storex", Storex.Socket.Handler, []},
# ...
]}
])
create-store
Create store
To create a store you need to create new elixir module with init/2
which is called when a page is loaded, every time websocket is connected it generates session_id and passes it as the first argument, params are from Javascript store declaration. Next, you can declare mutation/5
where the first argument is mutation name, second is data passed to mutation, next two params are same like in init/2
, the last one is the current state of the store.
defmodule ExampleApp.Store.Counter do
use Storex.Store
def init(session_id, params) do
0
end
# `increase` is mutation name, `data` is payload from front-end, `session_id` is current session id of connecton, `initial_params` with which store was initialized, `state` is store current state.
def mutation("increase", _data, _session_id, _initial_params, state) do
state = state + 1
{:noreply, state}
end
def mutation("decrease", _data, _session_id, _initial_params, state) do
state = state - 1
{:reply, "message", state}
end
def mutation("set", [number], _session_id, _initial_params, state) do
{:noreply, number}
end
end
connect-to-store
Connect to store
You have to connect the newly created store with a frontend side to be able to synchronise the state: params
are passed as second argument in store init/2
and as third in mutation/5
. You can subscribe to changes inside store state by passing option subscribe
with function as a value.
import Storex from 'storex'
const store = new Storex({
store: 'ExampleApp.Store.Counter',
params: {},
subscribe: (state) => {
const state = state
},
connection: (state) => {
console.log(state ? 'connected' : 'disconnected')
}
})
mutate-store
Mutate store
You can mutate store from javascript with store instance:
store.commit("increase")
store.commit("decrease").then((response) => {
response // Reply from elixir
})
store.commit("set", 10)
Or directly from elixir:
Storex.mutate(session_id, store, "increase")
Storex.mutate(session_id, store, "set", [10])
subscribe-to-store-state-changes
Subscribe to store state changes
You can subscribe to store state changes in javascript with function subscribe:
store.subscribe((state) => {
const state = state
})
subscribe-to-store-connection
Subscribe to store connection
You can subscribe to store connection state changes in javascript with function connection:
store.connection((state) => {
console.log(state ? 'connected' : 'disconnected')
})
configuration
Configuration
session-id-generation-library
Session id generation library
You can change library which generate session id for stores. Module needs to have generate/0 method.
config :storex, :session_id_library, Ecto.UUID
default-params
Default params
You can set default params for all stores in Javascript which will be passed to store.
Storex.defaults.params = {
jwt: 'someJWT'
}
custom-store-address
Custom store address
Storex.defaults.address = 'localhost/stores'