javascript - 未捕获的错误:在Connect(Form())的上下文或 Prop 中找不到“存储”

我在代码中使用redux，react-router-redux和redux-form。代码具有提供者，连接的路由器和微型组件。迷你组件包括交换机和一些组件，具体取决于路由。

Index.js

...
import { Provider } from 'react-redux'
import { ConnectedRouter, routerMiddleware } from 'react-router-redux'
import createBrowserHistory from 'history/createBrowserHistory'

import Reducers from './reducers'

const history = createBrowserHistory({ basename: 'mini' })
const middlewareRouter = routerMiddleware(history)
const store = createStore(Reducers, applyMiddleware(middlewareRouter))

render(<Provider store={store}>
    <ConnectedRouter history={history}>
        <Mini/>
    </ConnectedRouter>
</Provider>, document.getElementById('root'))

Mini.js

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
...
import NavigationContainer from './containers/navigation'
import CategoryContainer from './containers/category'

class Mini extends Component {
    render () {
        return (<main>
            <Switch>
                <Route path="/navigation" component={NavigationContainer}/>
                <Route path="/category" component={CategoryContainer}/>
                ...
            </Switch>
            <LoadContainer/>
            <div id="form"></div>
        </main>)
    }
}

开关部分中的所有组件都有一个按钮。单击该按钮可以呈现一个表单。

...
import FormCreate from './formcreate'

class Topbar extends Component {

    constructor (props) {
        super(props)
        this.handleClickCreate = this.handleClickCreate.bind(this)
    }

    handleClickCreate (e) {
        e.preventDefault()
        render(<FormCreate/>, document.getElementById('form'))
    }
    ...
}

但是当我单击按钮错误时出现Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"

我该如何解决该问题？提前致谢！

PS Reducers.js

import { combineReducers } from 'redux'
import { routerReducer as reducerRouter } from 'react-router-redux'
import { reducer as reducerForm } from 'redux-form'

const Reducers = combineReducers({
    ...
    router: reducerRouter,
    form: reducerForm
})

PSS FormCreate.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'

...

const FormCreate = (props) => {

    const { error, handleSubmit, pristine, reset, submitting } = props

    return (
        ...
    )
}

export default reduxForm({

    form: 'create',
    validate

}) (FormCreate)

最佳答案

我认为这里的问题是，您试图渲染FormCreate在html元素form中创建另一个无法访问redux存储的应用程序，从而导致您看到错误。

我要做的是设置一个reducer来处理是否应渲染FormCreate，然后像在LoadContainer中一样在应用程序的组件中对其进行渲染。

Topbar.js

class Topbar extends Component {

    constructor (props) {
        super(props)
        this.handleClickCreate = this.handleClickCreate.bind(this)
    }

    handleClickCreate (e) {
        e.preventDefault()
        // dispatch action to reducer to tell store to display FormCreate
    }
    ...
}

LoadContainer.js

class LoadContainer extends Component {

    // ... rest of code

    render() {
        // get shouldDisplayForm from redux store
        const { shouldDisplayForm } = this.props;

        return (
            //... rest of component
            { shouldDisplayForm && <FormCreate> }
        );
    }
}

另外，如果要在html元素“ form”中呈现FormCreate，则可以将商店存储在文件中，以便可以在多个文件中使用它。然后像提供Index.js一样，使用Provider渲染FormCreate。