Releases: franciscop/statux
Releases · franciscop/statux
v0.12.3
Helper functions
Added many array helpers:
export default () => {
const { push, concatenate, ...actions } = useActions('books');
return <div onClick={() => push('abc')}>Add ABC</div>;
};Added assign for objects:
export default () => {
const { assign } = useActions('user');
return <div onClick={() => assign({ name: 'John' })}>Set John</div>;
};Added and cleaned up tests for those helpers.
Frozen actions
Added a better implementation of useActions() that can also access nested properties:
// Before:
const setUser = useActions('user');
const setName = name => setUser(user => ({ ...user, name }));
// After:
const setName = useActions('user.name');Added freezing (and its associated testing) so that we cannot accidentally mutate existing properties:
// Before:
const user = useSelector('user');
user.id = 10; // Seems to work; leads to bugs
// After:
const user = useSelector('user');
user.id = 10; // Throws an explicit errorIntuitive Hooks
useStore() hooks are closer to React Hook useState(), removing magic naming:
// Before:
const { pokemon, setPokemon } = useStore();
// After:
const [pokemon, setPokemon] = useStore('pokemon');Added useActions hook:
// Before
const { setUser } = useStore();
// After
const setUser = useActions('user');Added string selectors (with namespacing/deep selectors) for useSelector:
// Before:
const { user: { name } } = useStore();
const name = useSelector(state => state.user.name);
// After:
const name = useSelector('user.name');Removed <State> to favor hooks; feel free to write a similar implementation if you really want it:
// Definition:
const State = ({ children }) => children(useSelector());
// Usage
<State>{({ user }) => <div>{user.name}</div>}</State>Select state
Added useSelector(), which accepts a callback as its only parameter:
// Before
const { user } = useStore();
// After
const user = useSelector(state => state.user);Initial commit
Initial commit based on what I learned from atama and React Hooks:
// Initial API:
import Store, { useStore, State } from 'statux';
const { user, setUser, books, setBooks, ... } = useStore();
<State>
{({ user, setUser, books, setBooks, ... }) => (
<div>{user.name}</div>
)}
</State>