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

时间:2018-02-06 01:11:51

标签: reactjs redux

我正试图从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;

非常感谢。

1 个答案:

答案 0 :(得分:2)

您的操作是异步的,因此您需要通过某些中间件(例如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})
    })
  }
}