藍(lán)山帝景
2021-06-01 17:41:28
我對(duì) react/redux(以及一般的 javascript)還很陌生,所以請(qǐng)耐心等待我在這里使用的術(shù)語(yǔ)...我試圖了解組件和減速器的工作原理,所以目前我正在練習(xí)一個(gè)小應(yīng)用程序,我主要從教程中復(fù)制/粘貼。我遇到的問(wèn)題是,我試圖從我的組件調(diào)度一個(gè)改變 Redux 狀態(tài)的操作,但是當(dāng)我從組件調(diào)度一個(gè)操作時(shí),我什至沒(méi)有在我的減速器函數(shù)中看到我的 console.log() 消息.這是我目前擁有的:應(yīng)用程序.jsimport 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)動(dòng)作.jsexport const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS'export function loginSuccess() { return { type: USER_LOGIN_SUCCESS, }}reducer1 和 reducer2 的 console.log() 消息都不會(huì)出現(xiàn)在控制臺(tái)中。當(dāng)我從 TwApp 組件調(diào)用 dispatch() 時(shí),是否會(huì)調(diào)用所有減速器(reducer1 和 reducer2)?我誤解了什么嗎?
2 回答

肥皂起泡泡
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超6個(gè)贊
您正在調(diào)度“l(fā)oginSuccess”,它是一個(gè)函數(shù),或者用 redux 術(shù)語(yǔ)來(lái)說(shuō)是一個(gè)動(dòng)作創(chuàng)建者。
您應(yīng)該將作為普通對(duì)象的操作分派給您的減速器。
您想要做的是調(diào)度 loginSuccess 將為您創(chuàng)建的操作:
loginSuccess: () => { dispatch(loginSuccess()) }

牛魔王的故事
TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊
comonentDidUpdate,因?yàn)槟呀?jīng)擁有它:
componentDidMount() {
console.log("TwApp componentDidMount")
this.props.loginSuccess()
}
然后mapDispatchToProps完全刪除您的功能并導(dǎo)出以下內(nèi)容:
export default connect(mapStateToProps, {loginSuccess})(TwApp)
添加回答
舉報(bào)
0/150
提交
取消