亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何不使用 Redux 傳遞 props?

如何不使用 Redux 傳遞 props?

元芳怎么了 2021-11-18 16:33:26
我剛剛了解到我們可以使用 redux 降低 React 項目的復雜性。使用單一的真實來源(存儲),我們不需要將狀態傳遞給不需要它們的組件。我正在努力理解這個聲明。假設我有三個組件,A、B 和 C。A 是一個容器,其狀態稱為text. B 是自定義按鈕,C 僅顯示文本。每當單擊 B 時,它都會更新 A 中的狀態。然后 C 將顯示更新后的文本。  A / \C   B我試過將redux應用到app上,發現還是需要把props傳下來。唯一的區別是我正在傳遞this.props.text而不是this.state.text.我看不出 redux 如何使這樣的應用程序受益。應用程序.jsimport React, { Component } from "react";import { connect } from 'react-redux'; import MyButton from "./MyButton";import { handleClick } from "./actions"; import Display from "./Display"class App extends Component {  render() {    return (      <div className="App">        <MyButton onClick={()=>this.props.handleClick(this.props.text)} />        <Display text={this.props.text} />      </div>    );  }}const mapStateToProps = state => ({    text: state.text.text})const mapDispatchToProps = dispatch => ({  handleClick: (text) => dispatch(handleClick(text))})export default connect(mapStateToProps, mapDispatchToProps)(App)另外,如果我們有另一個具有如下結構的應用程序。假設 B 不關心 A 的狀態,但 C 需要它來顯示文本。我們可以跳過 B 而讓 C 使用 A 的狀態嗎?A|B|C
查看完整描述

2 回答

?
滄海一幻覺

TA貢獻1824條經驗 獲得超5個贊

我想我找到了解決方案。我只是創建了一個文件 stores.js 并導出了商店。所以我可以在子組件需要它時通過調用 store.getState() 來導入它并檢索狀態。


你不應該那樣做。


相反,您應該對需要訪問商店屬性的每個組件使用 connect 函數,在結構中的任何地方。


但是,如果您只有三個組件,您可能不需要 Redux 或應用程序狀態的全局存儲。


Redux 對如何處理旨在保護數據流的全局狀態提出了很多意見。


否則,如果您只需要避免 prop 鉆?。赐ㄟ^多個級別傳遞 props,如在您的第二個示例中),您可以使用本機 React 上下文 API 來做到這一點:reactjs.org/docs/context.html


用一個例子編輯事情應該更清楚:


import React, { Component } from "react";

import { connect } from 'react-redux'; 


import MyButtonCmp from "./MyButton";

import DisplayCmp from "./Display"


import { handleClick } from "./actions"; 


// I am doing the connect calls here, but tehy should be done in each component file

const mapStateToProps = state => ({

    text: state.text.text

})

const Display = connect(mapStateToProps)(DisplayCmp)


const mapDispatchToProps = dispatch => ({

  onClick: (text) => dispatch(handleClick(text))

})

const MyButton =  connect(null, mapDispatchToProps)(MyButtonCmp)


class App extends Component {

  render() {

    return (

      <div className="App">

        {/* No need to pass props here anymore */}

        <MyButton />

        <Display />

      </div>

    );

  }

}


// No need to connect App anymore

// export default connect(mapStateToProps, mapDispatchToProps)(App)


export default App


查看完整回答
反對 回復 2021-11-18
?
慕后森

TA貢獻1802條經驗 獲得超5個贊

在這個例子中,你可以使用 redux 將應用狀態映射到 props。

我不明白為什么您會以這種方式(使用 redux)處理信息,除非您計劃在應用程序的多個部分使用數據并希望重新使用操作代碼。

查看更多:https : //react-redux.js.org/using-react-redux/connect-mapstate

第二個問題

另外,如果我們有另一個具有如下結構的應用程序。假設 B 不關心 A 的狀態,但 C 需要它來顯示文本。我們可以跳過 B 而讓 C 使用 A 的狀態嗎?

在 Redux 中,是的。

使用 React Hooks,是的。


查看完整回答
反對 回復 2021-11-18
  • 2 回答
  • 0 關注
  • 207 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號