Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Pass extra argument to actions #183

Open
wants to merge 19 commits into
base: master
Choose a base branch
from

Conversation

lkmill
Copy link

@lkmill lkmill commented Dec 2, 2019

This PR implements the option to initialize a store with an extra argument that will be passed to each invocation of action functions. This is very similar to the extra argument option in redux-thunk#injecting-a-custom-argument.

This branch is based on my new actions branch/PR. The other branch should be merged before this as implementing this functionality on the current actions logic would get kind of confusing.

const store = createStore({}, api)

const action = (query) => async (state, store, api) => ({
  stuff: await api(query),
})

// multiple arguments

const store = createStore({}, { api, whatever })

const action = (query) => async (state, store, { api, whatever }) => ({
  stuff: whatever(await api(query)),
})

Why?

Isomorphic actions / SSR

There are several use cases, an obvious one is passing different fetch implementations or similar
depending on if it is server or client side rendered.

// frontend
import rek from 'rek'

const store = createStore({}, rek)

// server
import rek from 'rek'

const store = createStore({}, rek.extend({ baseUrl: 'http://localhost:1337' }))

// isomorphic action
export const fetchCars = () => (state, store, rek) => (
  rek('/api/cars').json().then(cars => ({ cars }))
)

Easier testing

If the action uses browser globals, they have to be mocked:

export const fetchCars = () => (state, store) => (
  fetch('/api/cars').then(res => res.json()).then(cars => ({ cars }))
)

To test the following either a mock server has to be running, or something like proxyquire be used:

import fetch from 'node-fetch'

export const fetchCars = () => (state, store) => (
  fetch('/api/cars').then(res => res.json()).then(cars => ({ cars }))
)

Both problems above are solved by passing in a fetch argument. Then we simply pass in a mock fetch when testing:

export const fetchCars = () => (state, store, fetch) => (...)

Build Size

full/preact.js dist/unistore.js preact.js
master 760B 355B 546B
feature/new-action-creators 737B 327B 558B
feature/extra-arguments 738B 328B 558B

@lkmill lkmill force-pushed the feature/extra-arguments branch from 415d795 to c3c483b Compare December 2, 2019 20:18
@lkmill lkmill changed the title WIP Feature/extra arguments WIP Pass extra argument to actions Dec 5, 2019
@lkmill lkmill force-pushed the feature/extra-arguments branch 2 times, most recently from 619f1b7 to 3732880 Compare April 6, 2020 15:56
@lkmill lkmill force-pushed the feature/extra-arguments branch from 3732880 to e0363c9 Compare April 6, 2020 16:26
@lkmill lkmill force-pushed the feature/extra-arguments branch from e0363c9 to 157fac7 Compare April 7, 2020 14:06
@lkmill lkmill force-pushed the feature/extra-arguments branch from 157fac7 to 04bdd86 Compare April 16, 2020 16:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant