0

我正在尝试使用 axios 进行 api 调用并将其结果传递给减速器。尽管触发了动作，但减速器没有。我不明白为什么。

这是在安装之前应该进行 api 调用的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

//actions
import { getPost } from '../actions/';


class PostShow extends Component {
	constructor(props) {
		super(props);

	}

	componentWillMount() {
		getPost(this.props.params.id);
	}
	

	render() {
		console.log(this.props.activePost);
		return (
			<div>
				<h1> hello from a post</h1>
			</div>
		)
	}
}


const mapStateToProps = (state) => {
	return {
		activePost: state.posts.activePost
	}
};

const mapDispatchToProps = (dispatch) => {
	return bindActionCreators({
		getPost
	}, dispatch);
};

export default connect(mapStateToProps, mapDispatchToProps)(PostShow);

这是我的行动

import axios from 'axios';

import { FETCH_POSTS, SEND_POST, FETCH_POST } from './types';

const ROOT_URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '?key=qwerty';

export function fetchPosts() {
	const req = axios.get(`${ROOT_URL}/posts${API_KEY}`);

	return {
		type: FETCH_POSTS,
		payload: req
	}
}

export function sendPost(props) {
	const req = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);

	return {
		type: SEND_POST,
		payload: req
	}

}

export function getPost(id) {
	console.log('action triggered');
	const req = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`);

	return {
		type: FETCH_POST,
		payload: req
	}
}

这是我的减速机

import { FETCH_POSTS, FETCH_POST } from '../actions/types';

const INITIAL_STATE = {
	allPosts: [],
	activePost: null
};

export default (state = INITIAL_STATE, action) => {
	switch (action.type) {
		case FETCH_POSTS:
			return {
				...state,
				allPosts: action.payload.data
			};
		case FETCH_POST:
			console.log('reducer triggered');
			return {
			...state,
			activePost: action.payload.data
		};
		default:
			return state;
	}
}

结果，我看到来自 console.log 的“动作触发”，而 null 来自组件中的 console.log，并且没有来自 reducer 的 console.log，所以它没有被触发，我的组件中没有要呈现的数据. 尽管我发出请求并从服务器获得带有数据的响应，但它并没有发送到减速器。（此外，案例 FETCH_POSTS 工作正常，我可以呈现帖子列表，但不是特定的）。

“axios”：“^0.17.0”“redux-promise”：“^0.5.3”

4

1 回答 1

0

您需要使用this.props.getPostincomponentDidMount而不是getPost.

Connect 将绑定的动作创建者作为道具发送到组件

于 2017-11-02T18:16:44.337 回答