Question

这是一个例子：

export const fetchPosts = (path, postData) => {
    let url = target + path + Tool.paramType(postData);
    return dispatch => {
        dispatch(requestPosts(postData));
        return fetch(url,{
            mode: 'cors',
            "Content-Type": "application/json",
        })
        .then(response => {
            if(response.ok){
                response.json().then(json => dispatch(receivePosts(path, json)))
            }else{
                console.log("status", response.status);
            }
        })
        .catch(error => console.log(error))
    }
}

当我想在我的组件中请求数据时：

this.props.fetchPosts(this.props.seting.url,this.props.seting.data)

然而，当我像这样导入时：

import *as action from '../../Redux/Action/Index';
action.fetchPosts(this.props.seting.url,this.props.seting.data)

项目似乎成功启动......是吗？..... =。=

Answer 1

为了使fetchPosts可用作您的组件的道具，您需要使用mapDispatchToProps函数和bindActionCreators之类的

import *as action from '../../Redux/Action/Index';

......
mapDispatchToProps(dispatch) {
     return {
          fetchPosts: bindActionCreators(action.fetchPosts, dispatch);
     }

}

此外，您需要使用redux中的connect将操作绑定到组件，如

export default connect(null, mapDispatchToProps)(componentName);

这是正确的做法。

Answer 2

  import { connect } from 'react-redux'
  import { 
    requestPosts, 
    receivePosts 
  } from '../../Redux/Action/Index';

  export const fetchPosts = (path, postData) => {    
    const url = target + path + Tool.paramType( dispatch(requestPosts(postData)) );
    const { dispatch } = props

    return fetch(url, {
        mode: 'cors',
        "Content-Type": "application/json",
    })
    .then(response => {
        if(response.ok){
            response.json().then(json => dispatch(receivePosts(path, json)))
        }else{
            console.log("status", response.status);
        }
    })
    .catch(error => console.log(error))
}

export default connect(componentName);

当您使用connect时，dispatch会自动显示props，因此您可以通过将其包含在道具的解构中来直接调用它。似乎在您的代码中，您在postData被定义之前将Tool.paramType传递给mapDispatchToProps，并且直到返回之后才定义它 - 我无法说这不起作用或确实，它似乎可能失败 - 因此我将该调度直接移动到需要数据的地方。我上面的答案也是正确的，这些只是使用调度的不同方式而且我已经完成了两个 - 最近我停止使用connect一旦我知道它已经通过bindActionCreators在道具上可用，除非在这种情况下我需要/p:UseWPP_CopyWebApplication=true /p:PipelineDependsOnBuild=false，当您将调度传递给不知道redux的较低级别组件时，这是必需的。

如何以正确的方式使用派遣？

2 个答案: