代码之家 › 专栏 › 技术社区 › Nyxynyx

为什么使用返回函数分派React操作

redux-actions react-redux redux reactjs javascript

3

Nyxynyx · 技术社区 · 7 年前

在阅读React/Redux样板文件时,我发现了以下代码片段

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../../actions'
class Signout extends Component {

    componentWillMount() {
        this.props.signoutUser()
    }

    render() {
        return <div>Bye Bye</div>
    }
}

export default connect(null, actions)(Signout)

/actions/index/js

import axios from 'axios'
import { UNAUTH_USER, AUTH_USER, AUTH_ERROR, FETCH_MESSAGE } from './types'
const ROOT_URL = 'http://localhost:3090'

export function signoutUser() {
    localStorage.removeItem('token')
    return {
        type: UNAUTH_USER
    }
}

问题: 有人能解释为什么动作创造者 signoutUser() type: UNAUTH_USER 被召唤时 componentWillMount() 而这一行动将神奇地被派遣?

换句话说,我很困惑为什么没有 dispatch 打电话,例如

dispatch(this.props.signoutUser())

dispatch({ type: UNAUTH_USER })

如所示 redux docs

2 回复 | 直到 7 年前

1

5

Shubham Gupta 7 年前

dispatch(this.props.signoutUser())

这就是mapsdispatchtoprops在引擎盖下做的事情。当您从signOutUser返回一个值(该值使用mapDispatchToProps映射到您的组件)时,将发生以下情况

dispatch(/* returned value */)

事实上,我们在不知道幕后发生了什么的情况下使用了很多速记。例如,假设

const mapDispatchToProps = {
  signOutUser
}

与

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addTodo }, dispatch)
}

如评论中所建议的,我认为您可以查看mapsdispatchtoprops,bindActionCreators实现,它可以在以下链接中找到

https://github.com/reduxjs/react-redux/blob/3e53ff96ed10f71c21346f08823e503df724db35/src/connect/mapDispatchToProps.js

https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.js

2

4

Shubham Khatri 7 年前

有多种方法可以使用mapDispatchToProps或dispatch功能

不提供mapDispatchToProps

...
componentWillMount() {
    dispatch(signoutUser())
}
...
export default connect(null)(Signout);

在上面的例子中,如果您不提供mapDispatchToProps,那么一个DispatchProp将被传递给连接的组件,您可以使用它来分派操作。

提供mapDispatchToProps作为函数

...
componentWillMount() {
    dispatch(signoutUser())
}
...
const mapDispatchToProps = (dispatch) => {
     return {
          signoutUser: () => dispatch(signoutUser)
     }
}
export default connect(null, mapDispatchToProps)(Signout);

第三: 将对象提供为mapDispatchToProps

...
componentWillMount() {
    dispatch(signoutUser())
}
...
const mapDispatchToProps =  {
     return {
          signoutUser
     }
}

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

上述情况是第二种情况的简化版本,其中调度功能由react redux在内部处理

第三种情况是您间接使用的内容,因为当您导入操作时

import * as actions from '../../actions';

actions