Intro
This is started as personal joke: using svelte/store as a hook instead of react-redux
Implementation
You can check the svelte/store hooks in this file. A typescript implementation is also available in this gist
I could use the store without using a reducer, but to be fair I choose to use the reducer
pattern. The useReducerWithStore
hook is similar to react's userReducer
, but takes
the store instead of the initial state (to share the global value).
The rest of the code need only small changes, and only in the containers
folder as well
as removing the react-redux provider from the index.js
Pros-cons of svelte/store
Cons
- Action needs to be dispatched for every reducer (hook call). This is not necessarily bad
because it makes code more clear and fast, and can be solved by a
dispatchAll(dispatchArr, action)
helper - No amazing dev tools that I know of (yet)
Pros
- Slightly faster execution, due to less reducer calls. As the first con says, the action runs only in the reducers it needs. Should not matter too much, as switch statements are pretty fast
- Natural bundle split and tree shaking. This a big improvement. No need for special setups, as only imported reducers will be bundled
- Smaller bundle size
- Much faster execution due to no unnecessary comparisons to detect state change.
React-redux does some logic to check if any given
mapStateToProps
result has changed, so react can trigger a re-render. This happens for everymapStateToProps
, on everydispatch
call. By using the combination ofuseState
,useEffect
and the subscription model, we now need only the necessary render calls, without any comparisons.This grows linearly with both the number of reducers and connected components!!
Bundle size
Compressed build size
- Redux: 45.93 + 1.07 = 47.00kB
- Svelte: 41.40 + 1.21 = 42.61kB
- Diff: 6.81kB ~= -14.5%
This is the result from the build log, as you can see:
Redux
Svelte/store
Bundle analysis (uncompressed)
- Redux: 152.26kB
- Svelte: 136.66kB
- Diff: 15.60kB ~= -10.2%
This is the result of using the source-map-explorer
tool, as you can see: