减速器没有被触发（redux-promise with axios）

Posted 2023-02-22

【中文标题】减速器没有被触发（redux-promise with axios）

【英文标题】：reducer isn't triggered (redux-promise with axios)

【发布时间】：2018-04-15 08:39:58

【问题描述】：

我正在尝试使用 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"

【参考方案1】：

您需要在componentDidMount 中使用this.props.getPost 而不是getPost。

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