在Redux Reducer中执行Ajax Fetch？

Question

我正试图绕过Redux actionCreators中的状态; 而是执行以下操作(在reducer中执行ajax操作).为什么我需要为此访问状态 - 因为我想使用存储在状态中的CSRF令牌执行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;
    }
}

Answer 1

来自redux文档:

改变状态的唯一方法是发出一个动作,一个描述发生的事情的对象.不要将API调用放入reducer.Reducers只是纯函数,它采用先前的状态和动作,并返回下一个状态.记住返回新的状态对象,而不是改变以前的状态.

行动应描述变化.因此,该操作应包含新版本状态的数据,或者至少指定需要进行的转换.因此,API调用应该进入异步操作,以分派操作来更新状态.减速器必须始终是纯净的,没有副作用.

查看异步操作以获取更多信息.

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)))
    }
}