stateux
v0.1.3
Published
Really simple Redux like lib without reducers for state control
Downloads
18
Maintainers
Readme
Support me for future versions:
stateux
Really simple Redux like lib without reducers for state control
/*
Example using createStore utility
** state field its used as initial state
** all functions are binded to the store object
** you can also use Store.create
*/
import { createStore } from 'stateux';
export default createStore({
counter: 0,
//initialState
state: {
items: []
},
add(text){
this.state.items.push({ id: ++this.counter, text });
//the second parameter its the action name
//its optional but can be usefull to subscribe ONLY to this action update if you want
this.dispatch(this.state, 'add');
//this.dispatch function returns the state passed as parameter
//so you can use a simplified dispatch and return
//return this.dispatch(this.state);
},
remove(id){
this.state.items = this.state.items.filter((item)=> item.id != id);
this.dispatch(this.state, 'remove');
}
});
/*
Example using useStore utility
*/
import { setState } from 'react';
import { useStore } from 'stateux';
function TodoList(){
const todoList = useStore(TodoListStore);
//you can also subscribe only to an action like add or remove
//const todoList = useStore(TodoListStore, 'add');
const [state, setState] = useState({text: ''});
return (
<div>
{todoList.items.map((item)=> {
return (
<div key={item.id}
onClick={()=> TodoListStore.remove(item.id)}>
{item.text}
</div>)
})}
<input type="text" defaultValue="" onChange={(e)=> setState({ text : e.target.value })}/>
<button onClick={()=> TodoListStore.add(state.text)}>
Add
</button>
</div>
)
}
}
/*
Example using subscribe and unsubscribe + useEffect utility
*/
import { setState } from 'react';
function TodoList(){
//you can also subscribe only to an action like add or remove
//const todoList = useStore(TodoListStore, 'add');
const [state, setState] = useState({text: ''});
//more about useEffect: https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect
useEffect(()=> {
//if its a initialState, some previous state set or a update the callback will be called
//subscribe function returns the unsubscribe function
return TodoListStore.subscribe((storeState, action)=>{
//action name will be null if its the initialState
//you can check the action name if you want ex: action === 'add' || action === null
//merge the states or replace if you want
setState({ ...state, ...storeState});
});
//you can subscribe only to an action updates if you want
//const unsubscribe = TodoListStore.subscribe(callback, actionName)
}, [TodoListStore])
return (
<div>
{todoList.items.map((item)=> {
return (
<div key={item.id}
onClick={()=> TodoListStore.remove(item.id)}>
{item.text}
</div>)
})}
<input type="text" defaultValue="" onChange={(e)=> setState({ text : e.target.value })}/>
<button onClick={()=> TodoListStore.add(state.text)}>
Add
</button>
</div>
)
}
}
/*
Using class to create a Store
*/
import Store from 'stateux';
//or
//import { Store } from 'stateux';
class TodoListStore extends Store{
constructor(){
this.counter = 0;
this.state = {
items: []
};
//set as initial state
this.initial(this.state);
/*
//you can set directly too and use this.getState() to get the state object
this.initial({
items: []
});
let state = this.getState();
*/
}
add(text){
this.state.items.push({ id: ++this.counter, text });
//the second parameter its the action name
//its optional but can be usefull to subscribe ONLY to this action update if you want
this.dispatch(this.state, 'add');
//this.dispatch function returns the state passed as parameter
//so you can use a simplified dispatch and return
//return this.dispatch(this.state); ;
}
remove(id){
this.state.items = this.state.items.filter((item)=> item.id != id);
this.dispatch(this.state, 'remove');
}
}
export default new TodoListStore();
/*
Using class components
*/
import TodoListStore from './TodoListStore';
class TodoList extends React.Component{
constructor(props, context){
super(props, context);
//TodoListStore.subscribe returns the unsubscribe function
this.unsubscribeTodoList = TodoListStore.subscribe((state) => this.setState(state));
/*
//you can filter actions if you need
//action parameter will be null if its the initial state
this.unsubscribeTodoList = TodoListStore.subscribe((state, action) => {
if(action === "add" || action === null){
this.setState(state);
}
});
//or you can subscribe passing a action name too
//in this case will be called only if the action with this name is dispatched or if its the initial state
this.unsubscribeTodoList = TodoListStore.subscribe((state) => this.setState(state), "add");
*/
}
componentWillUnmount(){
this.unsubscribeTodoList();
}
updateText(e){
this.setState({ text : e.target.value });
}
render(){
return (
<div>
{this.state.items.map((item)=> {
return (
<div key={item.id}
onClick={()=> TodoListStore.remove(item.id)}>
{item.text}
</div>)
})}
<input type="text" defaultValue="" onChange={(e)=> this.updateText(e)}/>
<button onClick={()=> TodoListStore.add(this.state.text)}>
Add
</button>
</div>
)
}
}
export default TodoList;