redux-thunk-service
v1.0.1
Published
Service thunk middleware for Redux.
Downloads
9
Maintainers
Readme
Redux Thunk service
This package is completely built on top redux-thunk
https://github.com/reduxjs/redux-thunk
All the credits should got to original creators.
This project started as a fork of redux-thunk
. And this only wraps the
original library and is its dependency.
Injecting a Custom Argument Factory
The problem was that powerful function withExtraArgument
has one flaw. You
could not get state or dispatch inside it.
So the original usage was like this:
const api = 'http://www.example.com/sandwiches/';
const whatever = 42;
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);
// later
function fetchUser(id) {
return (dispatch, getState, { api, whatever }) => {
// you can use api and something else here
};
}
But obvious problem was that how could you construct such url for fetch dynamically using state? Like this:
class Api {
constructor(getState, fetchApi) {
this.getState = getState
this.fetchApi = fetchApi
}
get(url) {
return this.fetchApi.get(`${this.getState().config.base Url}/${url}`)
}
}
You could not do so. And that's just one case. There many and many occasion where you need app state to execute sideffects or at least to simplify the code and not to repeat yourself.
So the solution was an API like this:
const store = createStore(
reducer,
applyMiddleware(
thunk.withExtraArgument((dispatch, getState) => ({
api: new Api(getState, fetch.bind(window)),
whatever,
})),
),
);
To achieve this the middleware needed to be changed. I tried to
persuade the mantainers to
add it. Howerever, it was considered to be too much advanced for redux-thunk
.
Fair enough. I forked it.
Usage
This library only wraps redux-thunk
but changes API a bit.
import createThunkService from 'redux-thunk-service';
const store = createStore(
reducer,
applyMiddleware(
createThunkService((dispatch, getState) => ({
api: new Api(getState, fetch.bind(window)),
whatever,
})),
),
);
That's it. The factory is only called once when the store is instantiated. This means that instances in the factory are created only ones.
I definitely recommend this for passing dependencies to do side effects.
Typescript support
I have a problems with running typescript properly in this lib. I managed to fix all the big issues but there was still one types test that failed and I did not know what to do with it so I commented it out.
If you knew how to fix this test please do!
It seems to me that typing in the redux-thunk
was not correct for connected
props. Consider this:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
const thunkActionCreator = (): ThunkResult<Promise<void>> => (dispatch, getState) => {
return Promise.resolve()
}
// calling pure action creator returns a function logically
thunkActionCreator() === fn(dispatch, getState) {}
// but when dispatched, ti returns result of thunk
dispatch(thunkActionCreator()) === Promise.resolve()
// props like this should return an error
interface Props {
thunkActionCreator: typeof thunkActionCreator
}
// And it does! But if you call bindActionCreators in the connect() it "unpacked" the action creators.
// But this result in the problem:
export function App(props: Props) {
// The problem
props.thunkActionCreator() = Promise.resolve() // Types says OK but it is wrong!! Why? Because:
typeof thunkActionCreator is a Function, not Promise.resolve()
}
export default connect(
() => ({}),
dispatch => bindActionCreators({ thunkActionCreator }, dispatch)
)
// other file
// This is correct:
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { ThunkDispatchAction } from 'redux-thunk-service'
const thunkActionCreator = (): ThunkResult<Promise<void>> => (dispatch, getState) => {
return Promise.resolve()
}
interface Props {
thunkActionCreator: ThunkDispatchAction<typeof thunkActionCreator>
}
export function App(props: Props) {
// The correct type!
props.thunkActionCreator() === Promise.resolve()
}
export default connect(
() => ({}),
dispatch => bindActionCreators({ thunkActionCreator }, dispatch)
)
So don't forget to wrapp thunk action createor with
ThunkDispatchAction<typeof thunkActionCreator>
. And if this is wrong please
file an issue and help me to fix it!
Thanks
License
MIT