Skip to content

Instantly share code, notes, and snippets.

View vzaidman's full-sized avatar

Vitali Zaidman vzaidman

View GitHub Profile
@vzaidman
vzaidman / profileReducer.js
Last active October 7, 2017 19:43
Using an async action creator in a vanilla reducer
import { fetchProfile } from 'actions'
const initialState = { loading: false }
export const profileReducer = (state = initialState, {type, payload}) => {
switch (type) {
case fetchProfile.TYPE:
// handling action type 'FETCH_PROFILE@ASYNC_REQUEST'.
return { loading: true }
import { makeAsyncActionCreator } from 'redux-toolbelt'
const fetchProfile = makeAsyncActionCreator('FETCH_PROFILE')
import { makeAsyncReducer } from 'redux-toolbelt'
import { getItems } from './actions'
const options = {
defaultData: { items: [] },
dataGetter: (state, {type, payload, meta}) => ({ items: payload })
}
export const itemsReducer = makeAsyncReducer(asyncAction, options)
const state = undefined
asyncReducer(state, {type: '@@INIT'})
// ⇒ {
// loading: false,
// myData: {items: []}
// }
import { checkError } from './actions'
export const checkErrorReducer = makeAsyncReducer(checkError, {
shouldSpread: true,
destroyData: false
})
import { makeThunkAsyncActionCreator } from 'redux-toolbelt-thunk'
import { fetchTodosFromServer } from './api'
export const fetchTodos = makeThunkAsyncActionCreator('FETCH_TODOS', fetchTodosFromServer)
import {composeReducers, makeReducer, makeAsyncReducer} from 'redux-toolbelt'
import { updateObjectProperties } from 'redux-toolbelt-immutable-helpers'
import { loadCustomers, loadOrders, loadProfile, changeUserName, logout } from './actions'
export default composeReducers(
{
profile: makeAsyncReducer(loadProfile),
customers: makeAsyncReducer(loadCustomers),
orders: makeAsyncReducer(loadOrders)
},
import {composeReducers, makeReducer, makeAsyncReducer} from 'redux-toolbelt'
import { loadCustomers, loadOrders, loadProfile, changeUserName, logout } from './actions'
export default composeReducers(
{
profile: makeAsyncReducer(loadProfile),
customers: makeAsyncReducer(loadCustomers),
orders: makeAsyncReducer(loadOrders)
},
makeReducer(logout, (state, {type, payload}) => ({
@vzaidman
vzaidman / actions.js
Last active December 8, 2017 11:29
Redux Toolbelt Simple Action and Reducer
impoort { makeThunkAsyncActionCreator } from 'redux-toolbelt-thunk'
export const fetchTodos = makeThunkAsyncActionCreator('FETCH_TODOS', filter => fetchTodosFromServer(filter))
@vzaidman
vzaidman / 0_constants.js
Last active December 8, 2017 11:28
The Vanilla Redux Counterpart
export const FETCH_TODOS_LOADING = 'FETCH_TODOS@LOADING'
export const FETCH_TODOS_SUCCESS = 'FETCH_TODOS@SUCCESS'
export const FETCH_TODOS_FAILURE = 'FETCH_TODOS@FAILURE'