导入 redux 存储未定义（加载顺序问题？）

Question

更新 2 - 添加显示问题的最小“工作”示例

我在仍然显示问题的同时尽可能地缩减了项目，以便人们在感兴趣的情况下尝试想法/调试 github:store_import_test

错误发生在：request.js

注意：我知道赏金即将到期，但如果发生这种情况，我会重新启用它。我非常感谢到目前为止提出的所有想法/帮助！

结束更新 2

更新 1 - 用途说明：

我想在“实用程序功能”中访问商店中的一个值（可以改变超时）。根据redux docssubscribe是一个有效的选项。

结束更新

我正在尝试将我的 redux-store 导入组件之外（在 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

request.js

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

我的想法/我的尝试/我迷路的地方

注意：request.js 中的store 导入路径有效，请仔细检查 注意2：store 可用于app.js 和程序的其余部分

我认为request.js 中的import store from '../../store' 会触发const store = createStore(reducer, initialState, middleware()) 行，但显然它似乎确实如此。

尝试 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。不要忘记从request.js 中删除import store.js

Answer 2

您可以简单地在 App 组件中创建您的商店以减少复杂性，并将其传递给子组件。

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)

这将帮助您在整个工作流程中将应用状态与商店同步。 希望有帮助！ :)

Answer 3

你是不是在 request.js 中写了“../../store”，但是你的目录结构说它应该是“../store”。

Answer 4

我觉得你想制作反模式。您的需求正在我耳边低语“传奇”，但让我们照原样为您提供帮助。

我想从 github 向您提供已关闭的问题，但我想明确“他们”在哪里存储 - import {store} from "store"; 导出 const store = configureStore(); 并配置存储（以避免误解）返回 redux.createStore(...)。

在你知道我写了什么之后 - 你可以理解“他们”在写什么there和there。