Components of Almin
This introduce components of Almin
Almin provides only these components.
- Dispatcher
- Context
- UseCase
- Store
- StoreGroup
Other components like Domain, Repository and State are written by You!
You may notice that these components are similar to Flux or Redux. Almin is also a flux implementation library.
Almin | Flux | Redux |
---|---|---|
Dispatcher | Dispatcher | store.dispatch |
Context | Container | Middleware/React Redux |
UseCase | ActionCreator | Actions |
Store | Store | Store |
StoreGroup | Container | combineReducers |
(State) | Store | Reducer |
(Domain) | ||
(Repository) |
View
Almin is not View library. Almin is not dependent on any view library.
We can create View using UI library like React. Next, We want to add action to a component of View.
import React from "react";
class MyComponent extends React.Component {
render(){
return <div className="MyComponent">
<button>Awesome button</button>
</div>;
}
}
UseCase
Almin has UseCase
class that is similar with ActionCreator.
For example, We want to add action to the <button>Awesome button</button>
and
We going to create UseCase that dispatch
action.
import {UseCase} from "almin";
class AwesomeUseCase extends UseCase {
execute(){
// dispatch **action**
this.dispatch({
type: "AwesomeUseCase"
});
}
}
Clicking the button and dispatch action. In other word, Clicking the button and executing UseCase that dispatch action.
Executing? Directly way is following the code, but we want logging the execution.
const useCase = new AwesomeUseCase();
useCase.execute();
Functional UseCase
It is functional version of UseCase.
class AwesomeUseCase extends UseCase {
execute(...args){ }
}
context.useCase(new AwesomeUseCase()).execute([1, 2, 3]);
==
const awesomeUseCase = ({dispatcher}) => {
return (...args) => { }
};
context.useCase(awesomeUseCase).execute([1, 2, 3]);
The functional use-case is useful when the use-case do only dispatch
like following.
const dispatchUseCase = ({dispatcher}) => {
return () => dispatcher.dispatch({ type: "fire" });
}
Context
Almin has Context
class for observing and communicating with Store and UseCase.
import {Context} from "almin";
const context = new Context({ ... });
// context execute UseCase
const useCase = new AwesomeUseCase();
context(useCase).execute();
// Context#onDispatch etc... for logging!!
When the awesome button is clicked, execute the AwesomeUseCase
:
import {Context} from "almin";
import React from "react";
const context = new Context({ ... });
const onClick = () => {
const useCase = new AwesomeUseCase();
context(useCase).execute();
};
class MyComponent extends React.Component {
render(){
return <div className="MyComponent">
<button onClick={onClick}>Awesome button</button>
</div>;
}
}
Summarize the points so far
- Creating View using UI library
- Action is dispatched in UseCase
- Context connect View with UseCase
Store
We can dispatch action from UI events like clicking! But, How to update view?
Almin has Store
that is well-known application state container.
Store, State and Reducer is just a pattern of application.
We want to update state if AwesomeUseCase
is dispatched.
Simply write following to AppStore
.
import {Store} from "almin";
class AppStore extends Store {
constructor(){
super();
this.state = {};
}
// Receive payload from UseCase via Context
receivePayload(payload){
switch(payload.type){
case "AwesomeUseCase":
return this.setState({/* new state */});
default:
return
}
}
// return own state
getState(){
return this.state;
}
}
What's the hub between AwesomeUseCase
and AppStore
?
Yes, Context
have a role of hub.
AwesomeUseCase
dispatch action -> Context -> AppStore receive the action
Store -> View
View to know when store is updated.
What's the hub between AppStore
and View?
Context
have the role of hub again!
import {Context, Dispatcher} from "almin";
const appStore = new AppStore();
const context = new Context({
dispatcher: new Dispatcher(),
store: appStore
});
context.onChange((changedStore) => {
// subscribe the change of Store
// update View
});
Conclusion
We learn simply data flow of Almin.
- Create View
- Click Button
- Context execute UseCase
- UseCase dispatch action
- Context pass the action to Store
- Store is updated and the callback of
context.onChange
is called. - Update View!
- :recycle:
End
Almin don't aim to be framework that contain all things. Actually, Almin not contain View and Domain classes.
We can learn some patterns for JavaScript Application via Almin.
After all, We should write code thinking :)
Next
Next is Hello World that show concept of the components.