This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineReducers } from "redux"; | |
const actionTypes = { | |
"FETCH_DATA_REQUEST": "FETCH_DATA_REQUEST", | |
"FETCH_DATA_SUCCESS": "FETCH_DATA_SUCCESS", | |
"FETCH_DATA_FAILED": "FETCH_DATA_FAILED" | |
}; | |
const initialState = { | |
name: '', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore, applyMiddleware } from "redux"; | |
import reducer from "./reducer"; | |
const store = createStore(reducer, applyMiddleware()); | |
export default store; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore, applyMiddleware } from "redux"; | |
import reducer from "./reducer"; | |
import MySaga from "./middleware"; | |
import { ACTION_TYPES } from './reducer'; | |
const sagaInstance = new MySaga(); | |
sagaInstance.registerAction(ACTION_TYPES.FETCH_DATA_REQUEST, fetchDataWorker); | |
const store = createStore(reducer, applyMiddleware(sagaInstance.middleware)); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import axios from 'axios'; | |
import { call, put } from './effects'; | |
const fetchData = URL => axios.get(URL); | |
export function* fetchDataWorker(action) { | |
try { | |
const response = yield call(fetchData, `https://uinames.com/api/?gender=${action.payload}`); | |
yield put({ type: 'FETCH_DATA_SUCCESS', payload: response.data }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const middleware = store => next => action => { | |
console.log(action.type); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default class MySaga { | |
constructor() { | |
this.actionWatchList = new Map(); | |
} | |
registerAction(actionType, handler) { | |
this.actionWatchList.set(actionType, handler); | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
middleware = store => next => action => { | |
const handler = action.type ? this.actionWatchList.get(action.type) : undefined; | |
if (handler) { | |
// do middleware work | |
} | |
next(action); | |
} | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
if (handler) { | |
const handlerInstance = handler(action); | |
let yieldedValue = handlerInstance.next(); | |
(async () => { | |
while (!yieldedValue.done) { | |
switch (yieldedValue.value.effect) { | |
case 'effect/CALL': |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const call = (fn, ...args) => { | |
return { | |
effect: 'effect/CALL', | |
payload: fn, | |
args: args | |
}; | |
} | |
export const put = (action) => { | |
return { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { connect } from 'react-redux'; | |
import { fetchDataRequest } from './actions'; | |
import "./App.css"; | |
const App = props => ( | |
<React.Fragment> | |
<div className='button' onClick={() => props.fetchDataRequest('male')} > | |
Fetch a random male name! |
OlderNewer