时间戳

首页 > 解决方案 > 我认为调度不是回报承诺？

javascript - 我认为调度不是回报承诺？

问题描述

我想在 react-redux 中写一个 CRUD，并且有多个调度的问题。我认为我的调度没有返回承诺？

我的错误是“Uncaught TypeError: dispatch(...).then is not a function”，在这一行：

fetchPost: (id) => {
                dispatch(fetchPost(id))
                    .then((result) => ...

行动

export function fetchPost(id) {
    const request = axios.get(`${ROOT_URL}/posts/details/${id}`);
    console.log(request);
    return {
        type: "FETCH_POST",
        payload: request
    }
}

export function fetchPostSuccess(post) {
    return{
        type: "FETCH_POST_SUCCESS",
        payload: post
    }
}

export function fetchPostError(error) {
    return{
        type: "FETCH_POST_ERROR",
        payload: error
    }
}

减速器

case "FETCH_POST":
    return {
        ...state,
        loading: true,  
        activePost: state.activePost
    }
case "FETCH_POST_SUCCESS":
    return {
        ...state,
        activePost: action.payload
    }
case "FETCH_POST_ERROR":
    return {
        ...state,
        activePost: []            
    }

零件

class Details extends React.Component {
    constructor(props){
        super(props);
    }
    componentDidMount() {
        this.props.fetchPost(this.props.detail_id.id);
    }

    render() {
        return (
            <div>
                Details page
                <ul>
                    <li >
                        {this.props.detail_id.id}
                    </li>
                </ul>
            </div>
        )
    }
}

容器

const mapStateToProps = (state, ownProps) => ({ 
    posts: state.posts,
});


const mapDispatchToProps = dispatch => {
    return {

        fetchPost: (id) => {
            dispatch(fetchPost(id))
                .then((result) => {
                    if (result.payload.response && result.payload.response.status !== 200){
                        dispatch(fetchPostError(result.payload.response.data));
                    } else {
                        dispatch(fetchPostSuccess(result.payload.data));
                    }
                })
        },
        resetMe: () => {
            console.log('reset me');
        }
    };
};

const GetDetails = connect(
    mapStateToProps,
    mapDispatchToProps
)(Details)

我只想从帖子列表中选择帖子并在另一页上显示详细信息......希望有人帮助我解决这个问题

佐贺

export function* fetchProducts() {
    try {
        console.log('saga')
        const posts = yield call(api_fetchPost);
        console.log(posts);
        yield put({ type: "FETCH_SUCCESS", posts});
    } catch (e) {
        yield put({ type: "FETCH_FAILD", e});
        return;
    }
}

export function* watchFetchProducts() {
    yield takeEvery("FETCH_POSTS", fetchProducts)
}

标签： javascriptreactjsreact-redux

解决方案

根据Redux 文档，dispatch()返回分派的动作，即它的参数。调度的动作只是一个描述动作的普通对象。

承诺由Axios 的 get()方法返回，该方法只是axios()方法的别名。

异步方法的调用和 promise 解析都应该在 Redux 操作中完成。有Redux Thunk 中间件来处理这种异步操作。使用 Thunk 中间件，您可以从您的操作中返回一个函数。该函数采用单个参数dispatch，这是 Redux 的dispatch()函数，您可以从解析 Promise 的函数中调用它。

使用 Redux Thunk 中间件，您的操作fetchPost()将采用以下视图：

export function fetchPost(id) {
    return function(dispatch) {
        dispatch({type: 'FETCH_POST'})

        axios.get(`${ROOT_URL}/posts/details/${id}`)
            .then(function(response) {
                if (response.status === 200){
                    dispatch({type: 'FETCH_POST_SUCCESS', payload: response.data})
                } else {
                    dispatch({type: 'FETCH_POST_ERROR', payload: respose.data})
                }
            })
            .catch(function(error) {
                dispatch({type: 'FETCH_POST_ERROR', payload: error})
            })
    }
}

fetchPostSuccess()你的行为fetchPostError()是不必要的。

推荐阅读