@lowentry/react-redux 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -60
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,17 +31,17 @@ import {stateTimer} from '../state/stateTimer.js';
|
|
|
31
31
|
import {App} from '../components/App.jsx';
|
|
32
32
|
|
|
33
33
|
export const Head = () => (
|
|
34
|
-
|
|
34
|
+
<title>Home Page</title>
|
|
35
35
|
);
|
|
36
36
|
|
|
37
37
|
export default LeRed.memo(({}) =>
|
|
38
38
|
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
39
|
+
const store = LeRed.useConfigureStore({slices:{stateTimer}});
|
|
40
|
+
return (
|
|
41
|
+
<LeRed.Root store={store}>
|
|
42
|
+
<App/>
|
|
43
|
+
</LeRed.Root>
|
|
44
|
+
);
|
|
45
45
|
});
|
|
46
46
|
```
|
|
47
47
|
|
|
@@ -51,43 +51,43 @@ import {LeRed} from '@lowentry/react-redux';
|
|
|
51
51
|
|
|
52
52
|
export const stateTimer = LeRed.createSlice
|
|
53
53
|
({
|
|
54
|
-
|
|
54
|
+
state:
|
|
55
|
+
{
|
|
56
|
+
counter:0,
|
|
57
|
+
},
|
|
58
|
+
actions:
|
|
59
|
+
{
|
|
60
|
+
reset:
|
|
61
|
+
(state) =>
|
|
62
|
+
{
|
|
63
|
+
state.counter = 0;
|
|
64
|
+
},
|
|
65
|
+
|
|
66
|
+
increase:
|
|
67
|
+
(state, data) =>
|
|
55
68
|
{
|
|
56
|
-
|
|
69
|
+
state.counter += (data ?? 1);
|
|
57
70
|
},
|
|
58
|
-
|
|
71
|
+
|
|
72
|
+
decrease:
|
|
73
|
+
(state, data) =>
|
|
59
74
|
{
|
|
60
|
-
|
|
61
|
-
(state) =>
|
|
62
|
-
{
|
|
63
|
-
state.counter = 0;
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
increase:
|
|
67
|
-
(state, data) =>
|
|
68
|
-
{
|
|
69
|
-
state.counter += (data ?? 1);
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
decrease:
|
|
73
|
-
(state, data) =>
|
|
74
|
-
{
|
|
75
|
-
state.counter -= (data ?? 1);
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
waitAndIncrease:
|
|
79
|
-
function* (data)
|
|
80
|
-
{
|
|
81
|
-
const seconds = (data ?? 1);
|
|
82
|
-
yield LeRed.effects.delay(seconds * 1000);
|
|
83
|
-
yield LeRed.effects.put(stateTimer.actions.increase(seconds));
|
|
84
|
-
},
|
|
75
|
+
state.counter -= (data ?? 1);
|
|
85
76
|
},
|
|
86
|
-
|
|
77
|
+
|
|
78
|
+
waitAndIncrease:
|
|
79
|
+
function* (data)
|
|
87
80
|
{
|
|
88
|
-
|
|
89
|
-
|
|
81
|
+
const seconds = (data ?? 1);
|
|
82
|
+
yield LeRed.effects.delay(seconds * 1000);
|
|
83
|
+
yield LeRed.effects.put(stateTimer.actions.increase(seconds));
|
|
90
84
|
},
|
|
85
|
+
},
|
|
86
|
+
selectors:
|
|
87
|
+
{
|
|
88
|
+
counter:
|
|
89
|
+
state => state.counter,
|
|
90
|
+
},
|
|
91
91
|
});
|
|
92
92
|
```
|
|
93
93
|
|
|
@@ -99,31 +99,28 @@ import {stateTimer} from '../state/stateTimer.js';
|
|
|
99
99
|
|
|
100
100
|
export const App = LeRed.memo(({}) =>
|
|
101
101
|
{
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<br/>
|
|
121
|
-
</div>
|
|
122
|
-
);
|
|
102
|
+
const dispatch = LeRed.useDispatch();
|
|
103
|
+
const counter = LeRed.useSelector(stateTimer.selectors.counter);
|
|
104
|
+
const previousCounter = LeRed.usePrevious(counter);
|
|
105
|
+
|
|
106
|
+
LeRed.useEffectInterval(() =>
|
|
107
|
+
{
|
|
108
|
+
dispatch(stateTimer.actions.increase(1));
|
|
109
|
+
}, [], 1000);
|
|
110
|
+
|
|
111
|
+
return (
|
|
112
|
+
<div>
|
|
113
|
+
<p>
|
|
114
|
+
<div>Seconds: {counter}</div>
|
|
115
|
+
{(typeof previousCounter !== 'undefined') && (<div>Previously: {previousCounter}</div>)}
|
|
116
|
+
</p>
|
|
117
|
+
<Button color="primary" variant="contained" size="small" onClick={() => dispatch(stateTimer.actions.reset())}>Reset</Button>
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
123
120
|
});
|
|
124
121
|
```
|
|
125
122
|
|
|
126
123
|
|
|
127
124
|
## Final words
|
|
128
125
|
|
|
129
|
-
I hope this plugin will be useful to you. If you have any questions or suggestions, feel free to
|
|
126
|
+
I hope this plugin will be useful to you. If you have any questions or suggestions, please feel free to get in touch at [LowEntry.com](https://lowentry.com/).
|