Skip to content

Commit b35cc73

Browse files
committed
useReducer hook with redux saga
1 parent 3a6ac5c commit b35cc73

File tree

8 files changed

+5814
-0
lines changed

8 files changed

+5814
-0
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,49 @@
11
# react-async-saga-reducer
22
Use redux saga with React useReducer hook to handle side effects without Redux
3+
4+
### install
5+
` npm i react-async-saga-reducer `
6+
7+
### dependencies
8+
1. React
9+
2. Redux-Saga
10+
11+
### usage
12+
13+
saga.ts
14+
15+
import { put } from 'redux-saga/effects';
16+
17+
export function* mySaga() {
18+
// do something async
19+
yield put({ type: 'Action1'});
20+
}
21+
22+
reducer.ts
23+
24+
export function myReducer(prevState, action) {
25+
switch (action.type) {
26+
case 'ACTION1':
27+
return prevState + 1
28+
case 'ACTION2':
29+
return prevState - 1
30+
default:
31+
return prevState
32+
}
33+
}
34+
35+
component.tsx
36+
37+
import * as React from 'react';
38+
import { useAsyncSagaReducer } from 'react-async-saga-reducer';
39+
import { mySaga } from './mySaga';
40+
import { myReducer } from './myReducer';
41+
42+
const initialState = { foo: 'init' };
43+
44+
export const MyComponent = () => {
45+
const [state, ] = useAsyncSagaReducer(myReducer, mySaga, initialState);
46+
47+
return (<p className="current-state">{state.foo}</p>);
48+
};
49+

jest-setup.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const enzyme = require('enzyme');
2+
const Adapter = require('enzyme-adapter-react-16');
3+
4+
enzyme.configure({ adapter: new Adapter() });

0 commit comments

Comments
 (0)