Question

我想在react-redux中编写一个CRUD，并且有多个调度问题。我认为我的派遣没有退还诺言吗？

我的错误是“未捕获的TypeError：dispatch（...）。然后不是函数”，在此行上：

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()返回调度的动作，即它的参数。调度的动作只是描述动作的普通对象。

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

异步方法的调用和promise解析都应在Redux操作中完成。有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()是不必要的。

分派不是我认为的returnig许诺吗？

1 个答案: