Редукционные редукторы не вызываются при использовании dispatch () в Component

Question

Я довольно новичок в реагировании / редуксе (и в целом в javascript), поэтому, пожалуйста, потерпите меня при использовании терминологии здесь ...

Я пытаюсь понять, как работают Компоненты и Редукторы, поэтому в настоящее время я тренируюсь над небольшим приложением, которое я в основном копировал / вставлял из учебника. Проблема, с которой я столкнулся, заключается в том, что я пытаюсь отправить действие из моего Компонента, который изменяет состояние Redux, но я даже не вижу своих сообщений console.log () внутри своих функций редуктора, когда я отправляю действие из моего Компонента ,

Это то, что у меня сейчас есть:

TwApp.js

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { TWAPP_USERDATA_AUTH_TOKEN } from '../Constants'
import { loginSuccess } from '../actions'


class TwApp extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
        this.handleRefreshClick = this.handleRefreshClick.bind(this)
    }

    componentDidMount() {
        console.log("TwApp componentDidMount")
        this.props.loginSuccess() // This is where I want to dispatch an action
    }

    componentDidUpdate() {
    }

    handleChange() {
    }

    handleRefreshClick(e) {
        e.preventDefault()
        this.props.loginSuccess()
    }

    render() {
        const { loggedIn } = this.props;
        console.log("Rendering TwApp.")

        if (!loggedIn) {
            console.log("user not logged in. loggedIn = " + loggedIn)
        }
        else {
            return (
                <div>
                    <p>Success</p>
                </div>
            )
        }

    }
}


function mapStateToProps(state) {
    // nothing for now
}

function mapDispatchToProps(dispatch) {
    return {
        loginSuccess: () => { dispatch(loginSuccess) }
    }

}

export default connect(mapStateToProps, mapDispatchToProps)(TwApp)

actions.js

export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS'

export function loginSuccess() {
    return {
        type: USER_LOGIN_SUCCESS,
    }
}

reducers.js

 // Contains a bunch of stuff that isn't being used yet
import { combineReducers } from 'redux'
    import {
        USER_LOGIN_SUCCESS, INVALIDATE_SUBREDDIT,
        REQUEST_POSTS, RECEIVE_POSTS
    } from './actions'



    function reducer1(state = {}, action) {
        console.log("reducer1: state =" + JSON.stringify(state) + ", action = " + JSON.stringify(action))
        switch (action.type) {
            case USER_LOGIN_SUCCESS:
                console.log("Reducer USER_LOGIN_SUCCESS")
                state.loggedIn = true
                return state
            case RECEIVE_POSTS:
            case REQUEST_POSTS:

            default:
                return state
        }
    }

    function reducer2(state = {}, action) {
        console.log("reducer2: state =" + JSON.stringify(state) + ", action = " + JSON.stringify(action))

        switch (action.type) {
            case INVALIDATE_SUBREDDIT:
            case RECEIVE_POSTS:
            case REQUEST_POSTS:
            default:
                return state
        }
    }


    const rootReducer = combineReducers({
        reducer1,
        reducer2
    })

    export default rootReducer

В консоли не отображается сообщение console.log () пользователя reducer1 или reducer2. Когда я вызываю dispatch () из моего компонента TwApp, все ли редукторы (reducer1 и reducer2) вызывают? Я что-то неправильно понимаю?

Спасибо

Answer 1

Вы отправляете 'loginSuccess', который является функцией, или, по терминологии, создателем действия.
Вы должны отправлять действия, которые являются простыми объектами, на ваши редукторы.

Что вы хотите сделать, это отправить действие, которое loginSuccess создаст для вас:

loginSuccess: () => { dispatch(loginSuccess()) }

Answer 2

comonentDidUpdate, как у вас уже есть:

   componentDidMount() {
        console.log("TwApp componentDidMount")
        this.props.loginSuccess() 
    }

, затем полностью удалите функцию mapDispatchToProps и экспортируйте следующее:

export default connect(mapStateToProps, {loginSuccess})(TwApp)