获取函数不会使用 react-redux 调用

Question

我想用react redux调用一个rest api，但我的fetch根本没有被调用。

我的行动：

restActions.js file:
export const customerbyidGetAction = (data) => ({ type: types.customerbyidGetAction, data });

我的减速器：

restReducer.js file:
import { Map, fromJS } from 'immutable';
import * as types from '../constants/restConstants';
const initialState = {};
const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action) {
switch(action.type) {
case types.customerbyidGetAction:
return {
...state,
data: action.payload
}
break;
default:
// the dispatched action is not in this reducer, return the state unchanged
return state;
}
}

restApi.js文件：

import {customerbyidGetAction} from '../../redux/actions/restActions'
const URL = "https://***"

export default  function customerbyidGet() {

return dispatch => {
console.log("not called")
dispatch(customerbyidGetAction());
fetch(URL + 'customer/byid/Get',{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json',
'token':1234
},
body: JSON.stringify({'customerId': 1})
})
.then(res => {
const r = res.json();
return r;
})
.then(res => {
if(res.error) {
throw(res.error);
}
dispatch(customerbyidGetAction(res));
return res;
})
.catch(error => {
dispatch(customerbyidGetAction(error));
})
}
}

export default apis;

在我的组件内部：

import React from 'react';
import { Helmet } from 'react-helmet';
import Grid from '@material-ui/core/Grid';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import {
Help, InsertDriveFile,
MonetizationOn,
Person,
PersonPin,
RemoveRedEye
} from '@material-ui/icons';
import { Link } from 'react-router-dom';
import CounterWidget from '../../../components/Counter/CounterWidget';
import colorfull from '../../../api/palette/colorfull';
import styles from '../../../components/Widget/widget-jss';
import PapperBlock from '../../../components/PapperBlock/PapperBlock';
import {customerbyidGetAction} from '../../../redux/actions/restActions';

class Panelclass extends React.Component {

componentDidMount(){
const {customerbyidGet} = this.props;
customerbyidGet()
}

render() {
const { classes } = this.props;
return (
<div>
Hi
</div>
);
}
}
Panelclass.propTypes = {
classes: PropTypes.object.isRequired,
customerbyidGet: PropTypes.func.isRequired,
};
// const mapStateToProps = state => ({
//   customers: customerbyidGet(state),
// })
const mapDispatchToProps = dispatch => bindActionCreators({
customerbyidGet: customerbyidGetAction
}, dispatch)
const Panel = connect(
//mapStateToProps,
null,
mapDispatchToProps
)(Panelclass);
export default withStyles(styles)(Panel);

Answer 1

您的reducer期望payload属性生效：

function reducer(state = initialImmutableState, action) {
switch (action.type) {
case types.customerbyidGetAction:
return {
...state,
data: action.payload, // Here
};
}
}

所以，你需要有一个属性在行动创造者：

const customerbyidGetAction = (data) => ({
type: types.customerbyidGetAction,
payload: data, // Here
});

此外，您需要修复组件中的正确操作导入

import { customerbyidGet } from "../path-to/restApi";
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
customerbyidGet,
},
dispatch
);

PS：今天，您应该使用Redux Toolkit库，它减少了大量样板代码。

Answer 2

首先定义您的rest api函数，如下

export default  function customerbyidGet(dispatch) {

return () => {
console.log("not called")
dispatch(customerbyidGetAction());
fetch(URL + 'customer/byid/Get',{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json',
'token':1234
},
body: JSON.stringify({'customerId': 1})
})
.then(res => {
const r = res.json();
return r;
})
.then(res => {
if(res.error) {
throw(res.error);
}
dispatch(customerbyidGetAction(res));
return res;
})
.catch(error => {
dispatch(customerbyidGetAction(error));
})
}
}

然后将其传递给您的mapDispatchToProps函数

const mapDispatchToProps = dispatch => bindActionCreators({
customerbyidGetData: customerbyidGet(dispatch)
}, dispatch)

最后在mapDispatchToProps 中调用它

componentDidMount(){
const {customerbyidGetData} = this.props;
customerbyidGetData()
}

Answer 3

另外两个答案指出了好的地方，但遗漏了一些非常关键的东西：;有一个拼写错误。

const {customerbyidGet} = this.props;
customerbyidGet()

应该是

const {customerbyidGet} = this.props.customerbyidGet()