redux-cycles-http
v0.5.0
Published
Default HTTP flow cycle to use with `redux-cycles`
Downloads
16
Maintainers
Readme
redux-cycles-http
Default HTTP flow cycle to use with redux-cycles.
Installation
yarn add redux-cycles-http
or
npm install --save redux-cycles-http
Usage
Setup
Setup redux-cycles
as usual along with Cycle.js HTTP driver and add httpCycle
to your cycles:
import { createCycleMiddleware } from 'redux-cycles'
import { run } from '@cycle/run'
import { makeHTTPDriver } from '@cycle/http'
import { combineCycles } from 'redux-cycles'
import httpCycle from 'redux-cycles-http'
const cycleMiddleware = createCycleMiddleware()
const { makeActionDriver } = cycleMiddleware
const middlewares = [cycleMiddleware]
export const cycles = combineCycles(
httpCycle
)
run(cycles, {
ACTION: makeActionDriver(),
HTTP: makeHTTPDriver(),
})
Dispatch actions
export function somedataFetch(id) {
return {
type: ACTION_TYPE,
request: {
url: `${API_ENDPOINT}/path/${encodeURIComponent(id)}`,
method: 'GET',
}
}
}
Match it in reducer
export default function reducer(state = INITIAL_STATE, action) {
switch (action.type) {
case success(ACTION_TYPE):
return {
...state,
response: action.payload,
}
default:
return state
}
}
Success action payload contains:
data
- response data,request
- request matching this response,initial
- initial action payload.
Waiting for requests to finish
E.g. if you need it for server side rendering.
NB! This requires redux-thunk
or similar middleware.
import { awaitable } from 'redux-cycles-http'
static async getInitialProps({ query, store, isServer }) {
const { id } = query
await store.dispatch(awaitable(somedataFetch(id)))
return { isServer }
}
or
import { awaitable } from 'redux-cycles-http'
function getInitialActions() {
const awaitableFetch = awaitable(somedataFetch())
return store.dispatch(awaitableFetch).then(response => {
console.log('My data:', response.body)
return response
})
}