Question

我正试图从WordPress博客中提取帖子。

在控制台中，我只为Blog组件获取一个日志，其中this.props.posts为空对象。当动作通过reducer后状态发生变化时，它应该有第二个日志。我甚至可以在检查员看到成功的xhr请求。

以下是我正在开火行动的组件。

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {fetchPosts} from '../../action/index';
class Blog extends Component {

    componentDidMount(){
        this.props.fetchPosts();
    }

    render(){
        console.log('Posts are: ',this.props.posts);
        return (
            <div>
                <Link to="/posts/new"><button> Add a New Post </button> </Link>                
            </div>
        );
    }
}
function mapStateToProps(state){
    return {
        posts: state.posts
    };
}


export default connect(mapStateToProps, {fetchPosts})(Blog);

以下是减速机。

import FETCH_POSTS from '../action';
import _ from 'lodash';

function PostsReducer(state= {}, action){
    switch(action.type){

        case FETCH_POSTS:
        console.log('reducer: ', action.payload.data);
        return _.mapKeys(action.payload.data, 'id');


        default:
        return state;
    }
}

export default PostsReducer;

组合减速器的索引文件如下：

import {combineReducers} from 'redux';
import PostsReducer from './posts_reducer';

const rootReducer = combineReducers({
    posts: PostsReducer
});

export default rootReducer;

这是动作创建者文件

import axios from 'axios';

export const FETCH_POSTS = 'fetch_posts';

const ROOT_URL = 'https://public-api.wordpress.com/rest/v1.1/sites/ishhaanpatel.wordpress.com/posts';

export function fetchPosts() {

    const request = axios.get(`${ROOT_URL}`);

    console.log('request is: ',request);

    return {
        type: FETCH_POSTS,
        payload: request
    };

}
export default fetchPosts;

非常感谢。

Answer 1

您的操作是异步的，因此您需要通过某些中间件（例如redux-thunk）进行调度。请参阅官方文档中的"Async Actions"。

当您发送普通操作时，您只需返回对象文字，如下所示：

const actionCreator = () => ({ type: 'ACTION' })

但是您希望将响应有效负载附加到您的操作，因此您需要等到请求承诺解析并且（如果您正在使用thunk）返回一个将dispatch作为参数的函数，该函数返回实际操作有效载荷：

const asyncActionCreator = () => dispatch => { fetch('url') .then(response => dispatch({type: 'ACTION', payload: response})) }

请参阅上面的链接以获得更深入的解释和示例。

//编辑

如果您不熟悉ES6语法：

function asyncActionCreator() { return function(dispatch) { fetch('url') .then(function(response) { dispatch({type: 'ACTION', payload: response}) }) } }

为什么行动不通过减速机？

1 个答案: