redux-thunk

[xgqfrms-GitHub]

redux-thunk

applyMiddleware

http://redux.js.org/docs/api/applyMiddleware.html

https://github.com/gaearon/redux-thunk/blob/master/src/index.js

redux-thunk source codes

ES6, Error

thunk.withExtraArgument = createThunkMiddleware;

const createThunkMiddleware = (extraArgument) => {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }
        return next(action);
    };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
// ES6 : Uncaught ReferenceError: createThunkMiddleware is not defined
export default thunk;

ES5

function createThunkMiddleware(extraArgument) {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }
        return next(action);
    };
}

const thunk = createThunkMiddleware();
/*
({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState, extraArgument);
    }
    return next(action);
}
*/
thunk.withExtraArgument = createThunkMiddleware;
// ES5
/*
ƒ createThunkMiddleware(extraArgument) {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgume…

function createThunkMiddleware(extraArgument) {
    return ({ dispatch, getState }) => next => action => {
        if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument);
        }
        return next(action);
    };
}
*/
export default thunk;

[xgqfrms-GitHub]

redux-thunk

import ReduxThunk from 'redux-thunk';

http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559

http://redux.js.org/docs/api/applyMiddleware.html#example-custom-logger-middleware

Custom Logger Middleware

import { createStore, applyMiddleware } from 'redux';
import todos from './reducers';

function logger({ getState }) {
    return next => action => {
        console.log('will dispatch', action);
        // Call the next dispatch method in the middleware chain.
        let returnValue = next(action);
        console.log('state after dispatch', getState());
        // This will likely be the action itself, unless
        // a middleware further in chain changed it.
        return returnValue;
    };
}

let store = createStore(
    todos,
    ['Use Redux'],
    applyMiddleware(logger)
);

store.dispatch({
    type: 'ADD_TODO',
    text: 'Understand the middleware'
});
// (These lines will be logged by the middleware:)
// will dispatch: { type: 'ADD_TODO', text: 'Understand the middleware' }
// state after dispatch: [ 'Use Redux', 'Understand the middleware' ]

[xgqfrms-GitHub]

middleware

http://redux.js.org/docs/api/applyMiddleware.html#tips

If you want to conditionally apply a middleware, make sure to only import it when it's needed:

let middleware = [a, b];
if (process.env.NODE_ENV !== 'production') {
    let c = require('some-debug-middleware');
    let d = require('another-debug-middleware');
    middleware = [...middleware, c, d];
}

const store = createStore(
    reducer,
    preloadedState,
    applyMiddleware(...middleware)
);

[xgqfrms-GitHub]

Don’t fall into the trap of thinking a library should prescribe how to do everything.

https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559

Redux Thunk middleware allows you to write action creators that return a function instead of an action.

https://github.com/gaearon/redux-thunk#motivation

[xgqfrms-GitHub]

https://cdn.xgqfrms.xyz/json/

json

redux gist

https://github.com/xgqfrms/React/commit/33a16aa8713da404e190162502830c0aee49dd33

https://gist.github.com/xgqfrms-GitHub/33b08ef2fe4705020af8a8d827775380#gistcomment-2150334

https://gist.github.com/xgqfrms-GitHub/33b08ef2fe4705020af8a8d827775380#gistcomment-2152052

https://gist.github.com/xgqfrms-GitHub/cbcf462a76a287e1bb3392f10f153fd4#gistcomment-2152001

https://gist.github.com/xgqfrms-GitHub/cbcf462a76a287e1bb3392f10f153fd4#gistcomment-2154144

pluralsight

https://app.pluralsight.com/player?course=react-redux-react-router-es6&author=cory-house&name=react-redux-react-router-es6-m7&clip=5&mode=live

https://app.pluralsight.com/player?course=react-redux-react-router-es6&author=cory-house&name=react-redux-react-router-es6-m3&clip=0&mode=live

[xgqfrms-GitHub]

parsed json

json = response.json();

fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json)
});

fetch(`https://api.github.com/users/xgqfrms/repos`, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
    // json() ???
})
.then(function(json) {
    console.log('parsed json: ', json)
})
.catch(function(error) {
    console.log('parsing failed: ', error)
});

[xgqfrms-GitHub]

 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
});

 fetch(`https://api.github.com/users/xgqfrms/repos`)
.then(function(response) {
    let json = response.json();
    console.log(`response = ${json}`);
    return json;
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0].owner);
    console.log('parsed json: ', json[1].name);
});

[xgqfrms-GitHub]

fetch(`https://api.github.com/users/xgqfrms/repos`, {
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(function(response) {
    return response.json();
    // json() ???
})
.then(function(json) {
    console.log('parsed json: ', json);
    console.log('parsed json: ', json[0]);
    console.log('parsed json: ', json[1].name);
})
.catch(function(error) {
    console.log('parsing failed: ', error);
});

[xgqfrms-GitHub]

redux-promise

https://github.com/acdlite/redux-promise

https://github.com/acdlite/redux-promise/blob/master/src/index.js

[xgqfrms-GitHub]

redux async-action

http://redux.js.org/docs/Glossary.html#async-action