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

Question

I'am using redux, react-router-redux and redux-form in my code. Code has a Provider, Connected router and Mini component. Mini component includes Switch and some components, which depends on route.

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

All components in Switch section has a button. Clicking on the button can render a form.

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

But when I click on button error appear Uncaught Error: Could not find "store" in either the context or props of "Connect(Form(FormCreate))"

How can I fix the problem? Thanks in advance!

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

I think the problem here is that you are trying to render FormCreate create another app within html element form that does not have access to the redux store, resulting in the error that you see.

What I would do is set up a reducer that handle whether or not I should render FormCreate then render it in component in your app like in 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> }
        );
    } 
}

Alternatively, if you want to render FormCreate in html element 'form', you can put the store in a file so that you can require it in many files. Then render FormCreate with Provider like what you've done Index.js.