Почему React Actions отправляются с помощью функции Return - PullRequest
Новая
       61

Почему React Actions отправляются с помощью функции Return

0 голосов
/ 26 сентября 2018

Читая шаблон React / Redux, я наткнулся на следующий фрагмент кода

/ components / auth / signout.js 

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 })

, как показано в примитивных документах .

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Существует несколько способов использования mapDispatchToProps или функции отправки

Во-первых: Без предоставления mapDispatchToProps 

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

В приведенном выше случае, если выне предоставляйте mapDispatchToProps, реквизиты отправки передаются подключенному компоненту, который можно использовать для отправки действия.

Во-вторых: Предоставление mapDispatchToProps в качестве функции 

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

В вышеприведенном случае вы отправляете действие в mapDispatchToProps, которое передает возвращаемое значение в качестве реквизита компоненту

В-третьих: , предоставляя объект как mapDispatchToProps 

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

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

Вышеприведенный случай - это укороченная версия второго случая, в котором функциональность диспетчеризации внутренне обрабатывается реагирующим-избыточным

Третий случай - это то, что вы используете косвенно, поскольку при импорте действий, таких как 

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

actions в основном и объект, который передается как mapDispatchToProps

0 голосов
/ 26 сентября 2018 
dispatch(this.props.signoutUser())

Это то, что mapDispatchToProps делает под капотом.Когда вы возвращаете значение из signOutUser, который отображается на ваш компонент с помощью mapDispatchToProps, происходит следующее: 

dispatch(/* returned value */)

Есть много сокращений, которые мы используем на самом деле, не зная, что происходит внутри.Например, следующий 

const mapDispatchToProps = {
  signOutUser
}

совпадает с 

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

. Как предлагается в комментариях, я думаю, что вы посмотрите на mapDispatchToProps, реализацию bindActionCreators, которую можно найти в следующих ссылках

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

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

...