1 | ---
|
2 | id: motivation
|
3 | title: Motivation
|
4 | hide_title: true
|
5 | sidebar_label: Motivation
|
6 | ---
|
7 |
|
8 | # Motivation
|
9 |
|
10 | ## Problem
|
11 |
|
12 | [Redux](https://redux.js.org/) and [Redux DevTools](https://github.com/zalmoxisus/redux-devtools-extension) both work great for following what is happening in your app.<sup>1</sup>
|
13 |
|
14 | However, there are three pain points that at least one developer has encountered:
|
15 |
|
16 | 1. **Ugly boilerplate maintenance**: one more slice of state = another load of action types, creators and reducers to write.
|
17 | 2. **Unhelpfully named constants**: what was `NONTRIVIAL_THING_HAPPENED` meant to do, again...?
|
18 | 3. **Repetitive reducer logic**: an action that updates some slice of state to `true`? *How novel!*
|
19 |
|
20 | <sup>1</sup> *cf. what you* intended *to happen in your app...*
|
21 |
|
22 | ## Solution
|
23 |
|
24 | `redux-leaves` is a library that is written to provide:
|
25 |
|
26 | 1. **Pleasingly little boilerplate**: set up your reducer and actions in one line
|
27 | ```js
|
28 | const [reducer, actions] = reduxLeaves(initialState)
|
29 | ```
|
30 |
|
31 | 2. **Precise updates**: easily increment that counter, no matter how deeply you nested it
|
32 | ```js
|
33 | dispatch(actions.distressingly.and.foolishly.deeply.nested.counter.create.increment(2))
|
34 | ```
|
35 | 3. **Predictable changes**: understand exactly what's happening with clear and consistently named action types:
|
36 | ```js
|
37 | // action type dispatched above:
|
38 | 'distressingly/and/foolishly/deeply/nested/counter/asNumber.INCREMENT'
|
39 | ```
|
40 |
|
\ | No newline at end of file |