我认为调度没有返回承诺？

Question

我想在 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)
}

Answer 1

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

Promise 由 Axios' get() 方法返回，它只是 axios() 方法的别名。

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

使用 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() 操作是不必要的。