Uncaught Error: Could not find "store" in either the context or props of Connect(Form())

Question

我在我的代码中使用了 redux、react-router-redux 和 redux-form。代码有一个 Provider、Connected router 和 Mini 组件。 Mini组件包括Switch和一些依赖路由的组件。

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>)
    }
}

Switch部分的所有组件都有一个按钮。点击按钮可以渲染一个表单。

...
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)

Answer 1

我认为这里的问题是您正在尝试呈现 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，您可以将存储放在一个文件中，这样您就可以在许多文件中需要它。然后像您所做的那样使用 Provider 渲染 FormCreate Index.js。

Uncaught Error: Could not find "store" in either the context or props of Connect(Form())

Uncaught Error: Could not find "store" in either the context or props of Connect(Form())

javascript

reactjs

redux-form

react-redux