View redux.js
// Action and types | |
export const FETCH_ITEMS_START = 'FETCH_ITEMS_START'; | |
export const FETCH_ITEMS_SUCCESS = 'FETCH_ITEMS_SUCCESS'; | |
export const fetchItemsSuccess = (items) => { | |
return { | |
type: actionTypes.FETCH_ITEMS_SUCCESS, | |
payload: items | |
} | |
}; |
View example.js
// Actin types & Actions | |
export const GET_ITEMS = 'GET_ITEMS'; | |
export const SET_ITEMS = 'SET_ITEMS'; | |
export class GetItems implements Action { | |
readonly type = GET_ITEMS; | |
} | |
export class SetItems implements Action { | |
readonly type = SET_ITEMS; |
View post.js
//... | |
const rootReducer = combineReducers({ | |
// ... | |
}); | |
const sagaMiddleware = createSagaMiddleware(); | |
// we apply saga as a simple middleware (Redux-Thunk for example) | |
const store = createStore(rootReducer, composeEnhancers( | |
applyMiddleware(sagaMiddleware) |
View post.js
// same logic implemented with setTimeout() | |
export const checkAuthTimeout = (expirationTime) => { | |
return dispatch => { | |
setTimeout(() => { | |
dispatch(logout()) | |
}, expirationTime * 1000) | |
} | |
}; |
View post.js
import {delay} from 'redux-saga'; | |
import {put, call, takeEvery} from 'redux-saga/effects'; | |
import axios from "axios"; | |
import * as actions from '../actions/authorization' | |
export default function* watchAuthSaga() {...} | |
function* authUser(action) { | |
yield put(actions.authStart()); |
View post.js
import {delay} from 'redux-saga'; | |
import {put, call, takeEvery} from 'redux-saga/effects'; | |
import axios from "axios"; | |
import * as actions from '../actions/authorization' | |
export default function* watchAuthSaga() { | |
yield takeEvery('AUTH_USER', authUser); | |
yield takeEvery('AUTH_INITIATE_LOGOUT', logout); | |
yield takeEvery('AUTH_CHECK_TIMEOUT', checkAuthTimeout); |
View post.js
export const auth = (email, password, signin) => { | |
return { | |
type: 'AUTH_USER', | |
email: email, | |
password: password, | |
signin: signin | |
} | |
}; | |
export const authStart = () => { |
View post.js
import axios from 'axios'; | |
export const authStart = () => { | |
return { | |
type: AUTH_START | |
} | |
}; | |
export const authSuccess = (token, userId) => { | |
return { |
View post.js
const INITIAL_STATE = { | |
token: null, | |
userId: null, | |
error: null, | |
loading: false, | |
}; | |
// ... | |
const reducer = (state = INITIAL_STATE, action) => { |
View post.js
try { | |
const successResponse = yield fetch('url'); | |
const parsedResponse = yield successResponse.json(); | |
console.log(successResponse); | |
} catch(error) { | |
console.log(error) | |
} |
NewerOlder