在Redux Reducer中執行Ajax提取？

我試圖圍繞訪問Redux actionCreators中的狀態;而是做了以下操作（在reducer中執行ajax操作）。爲什麼我需要爲此訪問狀態 - 因爲我想用存儲在狀態中的CSRF令牌執行ajax。在Redux Reducer中執行Ajax提取？

有人可以告訴我，如果以下被認爲是不好的做法/反模式？

export const reducer = (state = {} , action = {}) => { 

    case DELETE_COMMENT: { 

     // back-end ops 
     const formData = new FormData(); 
     formData.append('csrf' , state.csrfToken); 
     fetch('/delete-comment/' + action.commentId , { 
      credentials:'include' , 
      headers:new Headers({ 
       'X-Requested-With':'XMLHttpRequest' 
      }) , 
      method:'POST' , 
      body:formData 
     }) 

     // return new state 
     return { 
      ...state , 
      comments:state.comments.filter(comment => comment.id !== action.commentId) 
     }; 
    } 

    default: { 
     return state; 
    } 
}

來源

2017-08-04 sammysaglam

從終極版文檔：

改變狀態的唯一方法是發出一個動作，對象描述發生了什麼。 不要將API調用放入reducer中。減速器只是一個純函數，它會採用先前的狀態和一個動作，並返回下一個狀態。記住要返回新的狀態對象，而不是改變以前的狀態。

操作應描述更改。因此，該操作應該包含新版本狀態的數據，或者至少指定需要進行的轉換。因此，API調用應該進入調度動作以更新狀態的異步操作。減肥藥必須是純淨的，並且沒有副作用。

查看async actions瞭解更多信息。

從了Redux實例異步動作的一個例子：

function fetchPosts(subreddit) { 
    return (dispatch, getState) => { 
     // contains the current state object 
     const state = getState(); 

     // get token 
     const token = state.some.token; 

     dispatch(requestPosts(subreddit)); 

     // Perform the API request 
     return fetch(`https://www.reddit.com/r/${subreddit}.json`) 
      .then(response => response.json()) 

      // Then dispatch the resulting json/data to the reducer 
      .then(json => dispatch(receivePosts(subreddit, json))) 
    } 
}

來源

2017-08-04 19:12:16 Matthew

非常感謝您對＆@ WitVault的澄清，你們倆都說了很多道理。我用thunk實現了異步操作;但是，我無法弄清楚的是，如何進行api調用（提取），但在提取時將狀態數據添加到我的POST變量中？例如：CSRF令牌？ – sammysaglam

@sammysaglam查看更新的答案。你可以有第二個參數，它是一個函數'getState'，它將返回基本狀態對象。 – Matthew

工作！驚人！非常感謝！我正試圖弄清楚現在好一個小時！ – sammysaglam

作爲每終極版的準則。

減速機保持純淨非常重要。在減速機內你永遠不應該做的事情：

改變它的參數;
執行API調用和路由轉換等副作用;
調用非純函數，例如Date.now（）或Math.random（）。

如果你問是否反模式，那麼是絕對的。

但是，如果你問什麼是解決方案。

在這裏，你需要從你的行動創造者派遣異步動作
使用「終極版，形實轉換」或「終極版 - 傳奇」爲
可以訪問狀態，並創建一些異步操作

例如，您的行動的創建者中（只是舉例）

export function deleteCommment(commentId) { 
    return dispatch => { 
     return Api.deleteComment(commentId) 
      .then(res => { 
       dispatch(updateCommentList(res)); 
      }); 
    }; 
} 

export function updateCommentList(commentList) { 
    return { 
     type : UPDATE_COMMENT_LIST, 
     commentList 
    }; 
}

編輯：您可以訪問國家 -

export function deleteCommment(commentId) { 
    return (dispatch, getState) => { 
     const state = getState(); 
     // use some data from state 
     return Api.deleteComment(commentId) 
      .then(res => { 
       dispatch(updateCommentList(res)); 
      }); 
    }; 
}

來源

2017-08-04 19:12:53 WitVault

非常感謝你＆Matthew的澄清，你們倆都說了很多道理。我用thunk實現了異步操作;但是，我無法弄清楚的是，如何進行api調用（提取），但在提取時將狀態數據添加到我的POST變量中？例如：CSRF令牌？ – sammysaglam

@sammysaglam你可以訪問行動創建者的狀態。 – WitVault

在Redux Reducer中執行Ajax提取？

回答

相關問題