use-typed-reducer 3.2.0 → 3.2.2

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.
Files changed (5) hide show
  1. package/README.md +37 -28
  2. package/dist/index.d.ts +11 -14
  3. package/dist/index.es.js +7 -46
  4. package/dist/index.js +7 -46
  5. package/package.json +13 -4
package/README.md CHANGED
@@ -24,7 +24,6 @@ With useTypedReducer, you can use your function the way you prefer, it will infe
24
24
 
25
25
  ### useReducer (default import) or `useTypedReducer`
26
26
 
27
-
28
27
  `useTypedReducer` receive the initialState and dictionary/object with all reducers and return tuple with state and dispatch. Dispatch has the same key and functions of given dictionary in `useTypedReducer`, but return a new function to update state. This void `dispatch({ type: "ACTION" })`
29
28
 
30
29
  ```tsx
@@ -72,48 +71,58 @@ const Component = () => {
72
71
  The same of useTypedReducer, but receive a `getProps` as second argument in the second function.
73
72
 
74
73
 
75
- ```typescript
74
+ ```typescript jsx
76
75
  import { useReducerWithProps, UseReducer } from "./index";
77
76
 
78
- const initialState = {
79
- numbers: 0,
80
- something: ""
81
- }
77
+ const initialState = { numbers: 0, something: "" };
82
78
 
83
79
  type State = typeof initialState;
84
80
 
85
81
  type Reducers = {
86
- reset: UseReducer.Reducer<State, () => any>;
87
- onChange: UseReducer.Reducer<State, (e: React.ChangeEvent<HTMLInputElement>) => any>;
88
- increment: UseReducer.Reducer<State, () => any>;
82
+ reset: UseReducer.Reducer<State, () => any>;
83
+ onChange: UseReducer.Reducer<State, (e: React.ChangeEvent<HTMLInputElement>) => any>;
84
+ increment: UseReducer.Reducer<State, () => any>;
89
85
  };
90
86
 
91
87
  type Props = {
92
- list: number[];
88
+ list: number[];
93
89
  }
94
90
 
95
91
  const reducers: Reducers = {
96
- increment: () => (state) => ({ ...state, numbers: state.numbers + 1 }),
97
- onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
98
- const value = e.target.valueAsNumber;
99
- return (state, props) => {
100
- const find = props.list.find(x => x === value);
101
- return find === undefined ? ({ ...state, numbers: value }): ({ ...state, numbers: find * 2 });
102
- }
103
- },
104
- reset: () => (state) => ({ ...state, numbers: 0 })
92
+ increment: () => (state) => ({ ...state, numbers: state.numbers + 1 }),
93
+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
94
+ const value = e.target.valueAsNumber;
95
+ return (state, props) => {
96
+ const find = props.list.find(x => x === value);
97
+ return find === undefined ? ({ ...state, numbers: value }) : ({ ...state, numbers: find * 2 });
98
+ };
99
+ },
100
+ reset: () => (state) => ({ ...state, numbers: 0 })
105
101
  };
106
102
 
107
103
 
108
104
  const Component = (props: Props) => {
109
- const [state, dispatch] = useReducerWithProps(initialState, props, reducers)
105
+ const [state, dispatch] = useReducerWithProps(initialState, props, reducers);
106
+
107
+ return (
108
+ <Fragment>
109
+ <button onClick={dispatch.increment}>+Increment</button>
110
+ <input onChange={dispatch.onChange} value={state.numbers} />
111
+ <button onClick={dispatch.reset}>Reset</button>
112
+ </Fragment>
113
+ );
114
+ };
115
+ ```
110
116
 
111
- return (
112
- <>
113
- <button onClick={dispatch.increment}>+Increment</button>
114
- <input onChange={dispatch.onChange} value={state.numbers} />
115
- <button onClick={dispatch.reset}>Reset</button>
116
- </>
117
- )
118
- }
117
+ ## useReducer
118
+
119
+ This is the new way to control your state, but with the old way of use-typed-reducer. Now you have a function to getState and a function to get the props. With this you can avoid to take a function that return a function to update state.
120
+
121
+ ```typescript
122
+ export const useMath = () => {
123
+ return useReducer({ count: 0 }, (getState) => ({
124
+ sum: (n: number) => ({ count: n + getState().count }),
125
+ diff: (n: number) => ({ count: n - getState().count })
126
+ }));
127
+ };
119
128
  ```
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ /// <reference types="react" />
2
+ declare type VoidableFn<Fn extends (...any: any[]) => any> = ReturnType<Fn> extends Promise<any> ? (...a: Parameters<Fn>) => Promise<void> : (...a: Parameters<Fn>) => void;
1
3
  declare type Action<State> = (...args: any) => Promise<(state: State) => State> | ((state: State) => State);
2
4
  declare type Actions<Actions, State> = {
3
5
  [key in keyof Actions]: Action<State>;
@@ -5,24 +7,19 @@ declare type Actions<Actions, State> = {
5
7
  export declare type Dispatch<ST, Fns extends Actions<Fns, ST>> = {
6
8
  [R in keyof Fns]: (...args: any[]) => Promise<(state: ST) => ST> | ((state: ST) => ST);
7
9
  };
8
- declare type ActionPropState<S, P> = (...args: any) => Promise<(state: S, props: P) => S> | ((state: S, props: P) => S);
9
- declare type ActionPropsState<A, S, P> = {
10
- [K in keyof A]: ActionPropState<S, P>;
10
+ declare type RemoveReduceReturns<State extends {}, Reducers extends Dispatch<State, Reducers>> = {
11
+ [R in keyof Reducers]: VoidableFn<Reducers[R]>;
11
12
  };
12
- declare type DispatchProps<ST extends {}, P, Reducers extends ActionPropsState<Reducers, ST, P>> = {
13
- [K in keyof Reducers]: (...args: any[]) => Promise<(state: ST, props: P) => ST> | ((state: ST, props: P) => ST);
14
- };
15
- declare type DefaultReducer<S extends {}> = (state: S) => S;
16
- declare type WithProps<S extends {}, P> = (state: S, props: P) => S;
17
- export declare type Reducer<S extends {}, A extends (...args: any) => DefaultReducer<S>> = (...params: Parameters<A>) => DefaultReducer<S>;
18
- export declare type ReducerWithProps<S extends {}, P extends {}, A extends (...args: any) => WithProps<S, P>> = (...params: Parameters<A>) => WithProps<S, P>;
19
- export declare const useTypedReducer: <State extends {}, Reducers extends Dispatch<State, Reducers>>(initialState: State, reducers: Reducers) => [state: State, dispatch: Reducers];
20
- export declare const useReducerWithProps: <State extends {}, Props extends {}, Reducers extends DispatchProps<State, Props, Reducers>>(initialState: State, props: Props, reducers: Reducers) => [state: State, dispatch: Reducers];
13
+ export declare const useTypedReducer: <State extends {}, Reducers extends Dispatch<State, Reducers>>(initialState: State, reducers: Reducers) => [state: State, dispatch: RemoveReduceReturns<State, Reducers>];
21
14
  declare type FnMap<State> = {
22
15
  [k: string]: (...args: any[]) => Partial<State> | Promise<Partial<State>>;
23
16
  };
24
17
  declare type MappedReducers<State extends {}, Fns extends FnMap<State>> = {
25
- [F in keyof Fns]: (...args: Parameters<Fns[F]>) => State | Promise<State>;
18
+ [F in keyof Fns]: (...args: Parameters<Fns[F]>) => State | Promise<State> | Partial<State> | Promise<Partial<State>>;
19
+ };
20
+ declare type MapReducerReturn<State extends {}, Fns extends FnMap<State>> = {
21
+ [F in keyof Fns]: VoidableFn<Fns[F]>;
26
22
  };
27
- export declare const useReducer: <State extends {}, Reducers extends (getState: () => State, getProps: () => Props) => MappedReducers<State, FnMap<State>>, Props extends {}>(initialState: State, reducer: Reducers, props?: Props | undefined) => [state: State, dispatchers: MappedReducers<State, ReturnType<Reducers>>];
23
+ export declare const useMutable: <T extends {}>(state: T) => import("react").MutableRefObject<T>;
24
+ export declare const useReducer: <State extends {}, Reducers extends (getState: () => State, getProps: () => Props) => MappedReducers<State, FnMap<State>>, Props extends {}>(initialState: State, reducer: Reducers, props?: Props | undefined) => [state: State, dispatchers: MapReducerReturn<State, ReturnType<Reducers>>];
28
25
  export default useTypedReducer;
package/dist/index.es.js CHANGED
@@ -116,38 +116,6 @@ var useTypedReducer = function (initialState, reducers) {
116
116
  }, [reducers]);
117
117
  return [state, dispatches];
118
118
  };
119
- var useReducerWithProps = function (initialState, props, reducers) {
120
- var _a = __read(useState(initialState), 2), state = _a[0], setState = _a[1];
121
- var refProps = useRef(props);
122
- useEffect(function () {
123
- refProps.current = props;
124
- }, [props]);
125
- var dispatches = useMemo(function () {
126
- return entries(reducers).reduce(function (acc, _a) {
127
- var _b;
128
- var _c = __read(_a, 2), name = _c[0], dispatch = _c[1];
129
- return (__assign(__assign({}, acc), (_b = {}, _b[name] = function () {
130
- var params = [];
131
- for (var _i = 0; _i < arguments.length; _i++) {
132
- params[_i] = arguments[_i];
133
- }
134
- return __awaiter(void 0, void 0, void 0, function () {
135
- var dispatcher;
136
- return __generator(this, function (_a) {
137
- switch (_a.label) {
138
- case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
139
- case 1:
140
- dispatcher = _a.sent();
141
- setState(function (previousState) { return dispatcher(previousState, refProps.current); });
142
- return [2 /*return*/];
143
- }
144
- });
145
- });
146
- }, _b)));
147
- }, reducers);
148
- }, [reducers]);
149
- return [state, dispatches];
150
- };
151
119
  var useMutable = function (state) {
152
120
  var mutable = useRef(state !== null && state !== void 0 ? state : {});
153
121
  useEffect(function () { return void (mutable.current = state); }, [state]);
@@ -157,8 +125,9 @@ var useReducer = function (initialState, reducer, props) {
157
125
  var _a = __read(useState(function () { return initialState; }), 2), state = _a[0], setState = _a[1];
158
126
  var mutableState = useMutable(state);
159
127
  var mutableProps = useMutable(props !== null && props !== void 0 ? props : {});
128
+ var mutableReducer = useMutable(reducer);
160
129
  var dispatchers = useMemo(function () {
161
- var reducers = reducer(function () { return mutableState.current; }, function () { var _a; return (_a = mutableProps.current) !== null && _a !== void 0 ? _a : {}; });
130
+ var reducers = mutableReducer.current(function () { return mutableState.current; }, function () { var _a; return (_a = mutableProps.current) !== null && _a !== void 0 ? _a : {}; });
162
131
  return entries(reducers).reduce(function (acc, _a) {
163
132
  var _b;
164
133
  var _c = __read(_a, 2), name = _c[0], dispatch = _c[1];
@@ -167,18 +136,10 @@ var useReducer = function (initialState, reducer, props) {
167
136
  for (var _i = 0; _i < arguments.length; _i++) {
168
137
  params[_i] = arguments[_i];
169
138
  }
170
- return __awaiter(void 0, void 0, void 0, function () {
171
- var newState;
172
- return __generator(this, function (_a) {
173
- switch (_a.label) {
174
- case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
175
- case 1:
176
- newState = _a.sent();
177
- setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
178
- return [2 /*return*/];
179
- }
180
- });
181
- });
139
+ var newState = dispatch.apply(void 0, __spread(params));
140
+ return newState instanceof Promise
141
+ ? void newState.then(function (state) { return void setState(function (prev) { return (__assign(__assign({}, prev), state)); }); })
142
+ : setState(function (prev) { return (__assign(__assign({}, prev), newState)); });
182
143
  }, _b)));
183
144
  }, reducers);
184
145
  }, []);
@@ -186,4 +147,4 @@ var useReducer = function (initialState, reducer, props) {
186
147
  };
187
148
 
188
149
  export default useTypedReducer;
189
- export { useReducer, useReducerWithProps, useTypedReducer };
150
+ export { useMutable, useReducer, useTypedReducer };
package/dist/index.js CHANGED
@@ -120,38 +120,6 @@ var useTypedReducer = function (initialState, reducers) {
120
120
  }, [reducers]);
121
121
  return [state, dispatches];
122
122
  };
123
- var useReducerWithProps = function (initialState, props, reducers) {
124
- var _a = __read(react.useState(initialState), 2), state = _a[0], setState = _a[1];
125
- var refProps = react.useRef(props);
126
- react.useEffect(function () {
127
- refProps.current = props;
128
- }, [props]);
129
- var dispatches = react.useMemo(function () {
130
- return entries(reducers).reduce(function (acc, _a) {
131
- var _b;
132
- var _c = __read(_a, 2), name = _c[0], dispatch = _c[1];
133
- return (__assign(__assign({}, acc), (_b = {}, _b[name] = function () {
134
- var params = [];
135
- for (var _i = 0; _i < arguments.length; _i++) {
136
- params[_i] = arguments[_i];
137
- }
138
- return __awaiter(void 0, void 0, void 0, function () {
139
- var dispatcher;
140
- return __generator(this, function (_a) {
141
- switch (_a.label) {
142
- case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
143
- case 1:
144
- dispatcher = _a.sent();
145
- setState(function (previousState) { return dispatcher(previousState, refProps.current); });
146
- return [2 /*return*/];
147
- }
148
- });
149
- });
150
- }, _b)));
151
- }, reducers);
152
- }, [reducers]);
153
- return [state, dispatches];
154
- };
155
123
  var useMutable = function (state) {
156
124
  var mutable = react.useRef(state !== null && state !== void 0 ? state : {});
157
125
  react.useEffect(function () { return void (mutable.current = state); }, [state]);
@@ -161,8 +129,9 @@ var useReducer = function (initialState, reducer, props) {
161
129
  var _a = __read(react.useState(function () { return initialState; }), 2), state = _a[0], setState = _a[1];
162
130
  var mutableState = useMutable(state);
163
131
  var mutableProps = useMutable(props !== null && props !== void 0 ? props : {});
132
+ var mutableReducer = useMutable(reducer);
164
133
  var dispatchers = react.useMemo(function () {
165
- var reducers = reducer(function () { return mutableState.current; }, function () { var _a; return (_a = mutableProps.current) !== null && _a !== void 0 ? _a : {}; });
134
+ var reducers = mutableReducer.current(function () { return mutableState.current; }, function () { var _a; return (_a = mutableProps.current) !== null && _a !== void 0 ? _a : {}; });
166
135
  return entries(reducers).reduce(function (acc, _a) {
167
136
  var _b;
168
137
  var _c = __read(_a, 2), name = _c[0], dispatch = _c[1];
@@ -171,18 +140,10 @@ var useReducer = function (initialState, reducer, props) {
171
140
  for (var _i = 0; _i < arguments.length; _i++) {
172
141
  params[_i] = arguments[_i];
173
142
  }
174
- return __awaiter(void 0, void 0, void 0, function () {
175
- var newState;
176
- return __generator(this, function (_a) {
177
- switch (_a.label) {
178
- case 0: return [4 /*yield*/, dispatch.apply(void 0, __spread(params))];
179
- case 1:
180
- newState = _a.sent();
181
- setState(function (previousState) { return (__assign(__assign({}, previousState), newState)); });
182
- return [2 /*return*/];
183
- }
184
- });
185
- });
143
+ var newState = dispatch.apply(void 0, __spread(params));
144
+ return newState instanceof Promise
145
+ ? void newState.then(function (state) { return void setState(function (prev) { return (__assign(__assign({}, prev), state)); }); })
146
+ : setState(function (prev) { return (__assign(__assign({}, prev), newState)); });
186
147
  }, _b)));
187
148
  }, reducers);
188
149
  }, []);
@@ -190,6 +151,6 @@ var useReducer = function (initialState, reducer, props) {
190
151
  };
191
152
 
192
153
  exports.default = useTypedReducer;
154
+ exports.useMutable = useMutable;
193
155
  exports.useReducer = useReducer;
194
- exports.useReducerWithProps = useReducerWithProps;
195
156
  exports.useTypedReducer = useTypedReducer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-typed-reducer",
3
- "version": "3.2.0",
3
+ "version": "3.2.2",
4
4
  "description": "use-reducer React hook alternative",
5
5
  "author": "g4rcez",
6
6
  "license": "MIT",
@@ -17,7 +17,8 @@
17
17
  },
18
18
  "scripts": {
19
19
  "build": "rollup -c",
20
- "start": "rollup -c -w"
20
+ "start": "rollup -c -w",
21
+ "test": "vitest run"
21
22
  },
22
23
  "peerDependencies": {
23
24
  "react": ">= 16.8.3"
@@ -26,12 +27,18 @@
26
27
  "@rollup/plugin-node-resolve": "9.0.0",
27
28
  "@rollup/plugin-strip": "2.0.0",
28
29
  "@rollup/plugin-url": "5.0.1",
30
+ "@testing-library/jest-dom": "5.17.0",
31
+ "@testing-library/react": "14.0.0",
29
32
  "@types/react": "16.9.19",
30
33
  "@types/react-dom": "16.9.4",
34
+ "@vitejs/plugin-react": "4.0.3",
31
35
  "babel-core": "6.26.3",
32
36
  "babel-runtime": "6.26.0",
33
37
  "cross-env": "7.0.0",
34
- "prettier": "2.8.7",
38
+ "jsdom": "22.1.0",
39
+ "prettier": "3.0.0",
40
+ "react": "18.2.0",
41
+ "react-dom": "18.2.0",
35
42
  "react-scripts-ts": "3.1.0",
36
43
  "rollup": "2.26.11",
37
44
  "rollup-plugin-alias": "2.2.0",
@@ -46,7 +53,9 @@
46
53
  "rollup-plugin-url": "3.0.1",
47
54
  "rollup-plugin-visualizer": "4.1.1",
48
55
  "tslib": "2.0.1",
49
- "typescript": "4.0.2"
56
+ "typescript": "4.0.2",
57
+ "vite": "4.4.4",
58
+ "vitest": "0.33.0"
50
59
  },
51
60
  "files": [
52
61
  "dist"