Comment ajouter un signet avec redux-saga

Question

Quelqu'un ici a un exemple d'application de bookmarking avec redux-saga? J'utiliser celui-ci, mais son seul pour Redux-thunk ->https://github.com/KeerthiHarish/Bookmarks-Web-UI

Answer 1

Votre fichier /actions/index.js:

export function fetchBookmarks() { 
    return { type: "FETCHING_BOOKMARKS" } 
} 

export function fetchBookmarksFulfilled(payload) { 
    return { type: "FETCH_BOOKMARKS_FULFILLED", payload } 
} 

export function fetchBookmarksRejected(payload) { 
    return { type: "FETCH_BOOKMARKS_REJECTED", payload } 
} 

export function createBookmark() { 
    return { type: "CREATING_BOOKMARKS" } 
} 

export function createBookmarkFulfilled(payload) { 
    return { type: "CREATE_BOOKMARKS_FULFILLED", payload } 
} 

export function createBookmarkRejected(payload) { 
    return { type: "CREATE_BOOKMARKS_REJECTED", payload } 
} 

export function deleteBookmark() { 
    return { type: "DELETING_BOOKMARKS" } 
} 

export function deleteBookmarkFulfilled(payload) { 
    return { type: "DELETE_BOOKMARKS_FULFILLED", payload } 
} 

export function deleteBookmarkRejected(payload) { 
    return { type: "DELETE_BOOKMARKS_REJECTED", payload } 
} 

export function associateBookmark() { 
    return { type: "ASSOCIATING_BOOKMARK_FOLDER" } 
} 

export function associateBookmarkFulfilled(payload) { 
    return { type: "ASSOCIATE_BOOKMARK_FOLDER_FULFILLED", payload } 
} 

export function associateBookmarkRejected(payload) { 
    return { type: "ASSOCIATE_BOOKMARK_FOLDER_REJECTED", payload } 
} 

votre fichier /sagas/index.js:

import axios from 'axios'; 
import { all, call, put, take } from 'redux-saga/effects'; 
import { 
    fetchBookmarksFulfilled, 
    fetchBookmarksRejected, 
    // the rest actions 
} 

export default function* rootSaga() { 
    yield all([ 
     call(fetchBookmarksSaga), 
     call(createBookmarksSaga), 
     call(deleteBookmarksSaga), 
     call(associateBookmarksSaga), 
    ]) 
} 

function* fetchBookmarksSaga() { 
    while (true) { 
     try { 
      yield take("FETCHING_BOOKMARKS") 
      const response = yield call(axios.get, "https://bookmarks-rest-api.herokuapp.com/bookmarks") 
      yield put(fetchBookmarksFulfilled(response.data)) 
     } catch (error) { 
      yield put(fetchBookmarksRejected(error)) 
     } 
    } 
} 

// likewise create, delete and associate sagas 

dans votre App.js:

import createSagaMiddleware from 'redux-saga' 
import rootSaga from './sagas' 

sagaMiddleware = createSagaMiddleware() 
store = createStore(reducers, persistedState, applyMiddleware(sagaMiddleware)); 
sagaMiddleware.run(rootSaga)