Question

更新2 - 添加最少的＆＃39;工作＆＃39;显示问题的示例

我尽可能地调整了项目，同时仍然显示问题，允许人们尝试想法/调试，如果他们感兴趣的话 github:store_import_test

错误发生在：request.js

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

结束更新2

更新1 - 目的说明：

我想在“实用程序功能”中访问商店中的值（可以更改加班时间）。根据{{3}} subscribe是有效选项。

结束更新

我尝试在组件外部导入我的redux-store（request.js，见下文），类似于：redux docs

但是，所有这些解决方案（包括What is the best way to access redux store outside a react component?）都不起作用，因为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

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

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

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

尝试1

我还尝试将商店导出为：

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

并将其导入request.js作为：

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

思考可能是聪明的＆＃39;默认加载做了一些我不了解/理解的魔法。同样的错误，未定义

尝试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 {1}}此时未初始化。在导出之前，请尝试将store.subscribe(listener)和listener功能一起移至store.js。不要忘记从import store.js

中删除request.js

Answer 2

我觉得你想做反模式。你的需求在我耳边低语“传奇”，但让我们帮助你。

我想从github给你一个封闭的问题，但是我想明确“他们”在哪里存储 - import {store} from "store";导出const store = configureStore();并且配置存储（以避免误解）正在返回redux.createStore(...)。

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

Answer 3

你写过＆＃34; ../../ store＆＃34;在request.js中，但你的目录结构说它应该是＆＃34; ../ store＆＃34;。

Answer 4

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

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)

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

导入redux商店是未定义的（加载订单问题？）

4 个答案: