Redux與React - 正確的方式與組件共享商店

Redux的商店服務最終被React App中的各種組件所使用。由它公開的方法（例如dispatch，getState和subscribe）被各種組件（如容器或表示）使用。Redux與React - 正確的方式與組件共享商店

我認爲通過這個商店服務的方法是一個重要的設計決定。我看到兩種方法，它們是：

1）通過將商店作爲道具傳遞給所有嵌套級別的每個組件。這不是推薦的。

2）使用像react-redux這樣的工具，在上下文的幫助下，使存儲（狀態和調度準確）在任何需要的地方都可用。

我的問題是：爲什麼不只是在需要的地方導入商店。對於基於SPA的React App，商店將是一個單身人士。嵌套在任何級別的組件都可以簡單地導入商店。我們爲什麼要採用上述兩種方法中的任何一種？

在任何嵌套級別的組件：我們可以做這

import store from "path/to/store"; 

let MyComponent =() => { 
    let state = store.getState(); 

    return (
     <div onClick={() => { 
      store.dispatch({ 
       type: "SOME_EVENT", 
       payload: store.somedata 
      }); 
     }}>{state.dataINeedHere}</div> 
    ); 
}; 

export default MyComponent;

代替

import { connect } from "react-redux"; 

let MyComponent = ({somedata, onMyAction}) => { 
    let state = store.getState(); 

    return (
     <div onClick={() => { 
      onMyAction(somedata); 
     }}>{somedata}</div> 
    ); 
}; 

const mapStateToProps = (state) => { 
    return { 
    somedata: state.somedata 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onMyAction: (input) => { 
     dispatch({ 
      type: "SOME_EVENT", 
      payload: input 
     }); 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

來源

2016-04-15 Vijey

在你的「我們能做到這一點」的例子中，什麼會導致你的組件在某些狀態改變時重新渲染？ – azium

我會訂閱頂級的狀態更改並觸發重投 – Vijey

您是否看過mobx/mobx-react？聽起來像你所描述的。 – azium

該Redux常見問題涵蓋此問題，在http://redux.js.org/docs/FAQ.html#store-setup-multiple-stores。

總結：當你可以直接導入一個商店時，你將你的代碼綁定到那個商店實現，這使得它更少重用和更難測試。理想情況下，你自己的代碼都不會直接引用商店。連接組件，中間件和thunked動作創建器都通過依賴注入接收相關的dispatch和getState函數引用，使它們可重用並允許輕鬆模擬測試行爲。

來源

2016-04-15 17:26:12 markerikson

考慮一下，當你有一個第二MyComponent的，它從不同的部分管理數據會發生什麼商店。你選擇是告訴對方究竟是如何訪問/更新其數據：

<Container> 
    <MyComponent path="https://stackoverflow.com/a/b/c" /> 
    <MyComponent path="https://stackoverflow.com/a/b/d" /> 
</Container>

，或者你可以給每個只訪問它所需要的：

<Container> 
    <!-- context /a/b was passed to Container --> 
    <MyComponent data={c} onUpdate={update(c)} /> 
    <MyComponent data={d} onUpdate={update(d)} /> 
</Container>

後者使得MyComponent的非常簡單，和更靈活。

來源

2016-04-15 05:35:35

Redux與React - 正確的方式與組件共享商店

回答

相關問題