The error "could not find 'store' in the context of Connect(Droppable)" in the context of React DnD (Drag and Drop) usually occurs when there's a mismatch between the version of react-dnd and react-dnd-redux packages or when the required Redux store is not properly configured.

To resolve this issue, follow these steps:

  1. Make sure you have installed the required packages correctly:

    npm install react-dnd react-dnd-html5-backend react-dnd-redux --save

    Ensure that you have installed both react-dnd and react-dnd-redux. The react-dnd-html5-backend package is necessary if you are using the HTML5 backend for React DnD.

  2. Properly configure your Redux store and provider:

    Make sure you have set up your Redux store and wrapped your app with the Redux Provider. The Provider should be placed at the top level of your app, usually in the entry file (e.g., index.js or index.tsx).

    For example, in index.js or index.tsx:

    import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import rootReducer from './reducers'; // Your root reducer const store = createStore(rootReducer); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
  3. Ensure that your components are correctly connected to the Redux store:

    In your Droppable component or any other component using React DnD, make sure you use the connect function from react-dnd-redux to connect your components to the Redux store.

    For example:

    import { connect } from 'react-redux'; import { Droppable } from 'react-dnd'; const MyDroppableComponent = () => { // Your Droppable component implementation }; // Connect the component to Redux store export default connect()(Droppable('TYPE')(MyDroppableComponent));
  4. Check your version compatibility:

    Ensure that the versions of react-dnd and react-dnd-redux are compatible with each other. If you are using different major versions, they might have breaking changes that can lead to this error.

By following these steps, you should be able to resolve the "could not find 'store' in the context of Connect(Droppable)" error in React DnD with Redux. Always verify that your packages are up to date and that you have correctly set up your Redux store and provider.

Have questions or queries?
Get in Touch