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

lohfu
Copy link

@lohfu lohfu 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

@lohfu lohfu changed the title WIP Feature/extra arguments WIP Pass extra argument to actions Dec 5, 2019
@lohfu lohfu force-pushed the feature/extra-arguments branch 2 times, most recently from 619f1b7 to 3732880 Compare April 6, 2020 15:56
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.

None yet

1 participant