如何使用 redux-saga 添加书签答案

【问题标题】：How to add bookmark with redux-saga如何使用 redux-saga 添加书签
【发布时间】：2017-10-09 07:30:04
【问题描述】：

这里有人有一个带有 redux-saga 的示例书签应用程序吗？我用过这个，但它只用于 redux-thunk -> https://github.com/KeerthiHarish/Bookmarks-Web-UI

【问题讨论】：

标签： javascript reactjs bookmarks redux-saga

【解决方案1】：

您的 /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 }
}

您的 /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

在您的 App.js 中：

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

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

【讨论】：