導入終極版店是不確定的（加載順序問題？）

Question

更新2 - 添加最少的「工作」例子顯示問題

我就下調的項目，因爲我可以同時仍呈現問題，允許人們嘗試的想法/調試，如果他們有興趣發生 github:store_import_test

錯誤：request.js

注：我知道賞金即將到期，但如果我要重新啓用那個會發生。我非常感激迄今爲止所有的想法/幫助！

結束更新2

更新1 - 目的描述：

欲從商店訪問的值在一個 '效用函數'（即可以改變超時）。根據redux docssubscribe是一個有效的選項。

末更新

我試圖導入我的終極版店內組件的外（在request.js，見下文）類似於：What is the best way to access redux store outside a react component?

然而，所有這些解決方案（包括https://github.com/reactjs/redux/issues/776）不起作用，因爲我的request.js試圖在createStore()之前導入商店，因此store.js導致store爲undefined。

我的目錄結構看起來像這樣

. 
├── app 
│   ├── api 
│   ├── network 
│   | └── request.js 
│   ├── app.js 
│   ├── store.js 
├── index.android.js 
├── index.ios.js 

的index.android/ios.js是入口點，只是加載app.js

index.android/ios.js

import App from './app/app'

app.js個

import store from './store' 
class App extends React.Component { 
    render() { 
     return (
      <Provider store={store}> 
        <RootStackNavigation /> 
      </Provider> 
     ) 
    } 
} 

store.js

... 
const store = createStore(reducer, initialState, middleware()) 
export default store 

請求。JS

import store from '../../store' 
store.subscribe(listener) 
... 
const someFunc(){} 
export default someFunc 

我的想法/是我的嘗試/在我迷路

注：request.js的store進口路徑是有效的，雙重檢查 注2：該store可用在app.js和程序的其餘部分

我會認爲import store from '../../store'在request.js會觸發const store = createStore(reducer, initialState, middleware())行，但appar它似乎確實如此。

嘗試1

我想還出口店這樣：

export const store = createStore(reducer, initialState, middleware())

和進口它request.js爲：

import {store} from '../../store

想也許'聰明'默認加載會做一些魔法我不知道/理解。同樣的錯誤，未定義

嘗試2添加getStore()到store.js

let store = null 
store = createStore(reducer, initialState, middleware()) 
export function getStore() { 
    if (store == null) { 
     store = createStore(reducer, initialState, middleware()) 
    } 
    return store 
} 

export default store 

不工作，參數createStore尚未初始化。

我必須誤解加載過程或將它與Python的混合，但是什麼妨礙了它的工作？其他人似乎也成功地使用了相同的解決方案（請參閱上述職位）。

Answer 1

發現問題。我是對的 - 這是一個循環。在store.js您需要reducers/index.js然後navigation.js然後../navigators/RootNavigationConfiguration需要Home.js需要/api/network需要request.js，它需要store它在這一點上未初始化。嘗試在輸出之前將store.subscribe(listener)和listener函數移至store.js。不要忘記刪除import store.js從request.js

Answer 2

我覺得你想做反模式。你的需求在我耳中低語「傳奇」，但讓我們來幫你。

我想給你從GitHub封閉的問題，但我想弄清楚這裏的「他們」越來越店 - import {store} from "store";出口const store = configureStore();和配置存儲（以避免missunderstanding）將返回redux.createStore(...)。

當你知道我寫了什麼 - 你可以理解他們正在寫什麼there和there。

Answer 3

您是否在request.js中編寫了「../../store」，但是您的目錄結構表示它應該是「../store」。

Answer 4

您可以簡單地在應用程序組件中創建商店，以減少併發症並將其傳遞給子組件。

let store = createStore(reducers); 

export class App extends Component { 
    constructor() { 
     super(); 
     this.state = store.getState(); 
     this.syncState = this.syncState.bind(this); 
    } 

    syncState() { 
     this.setState(store.getState());   
    } 

    componentDidMount() { 
     this.setState(store.getState()); 
     const unsubscribe = store.subscribe(this.syncState); 
    } 

    render() { 
     return (
      <Provider store={store}> 
       <AppNavigator/> 
      </Provider> 
     ) 
    } 
} 

然後，您的子組件需要從react-redux導入連接。

import {connect} from 'react-redux'; 

export class SubComponent extends Component { 
    //Implementation 
    //this.props.myLocalCopy - gives you the value 
    //this.props.someTask(data) - Updates the store and updates your props. 
} 

function mapStateToProps(state) { 
    return { 
     myLocalCopy: state.someStoreProperty 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     someTask: (data) => { 
      dispatch(actionCreators.someTask(data)); 
     } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(SubComponent) 

這將幫助您在整個工作流程中同步應用程序狀態與商店。 希望有所幫助！:)