Could not find “store” in either the context or props of “Connect(App)”

by

  • Provider, passes the store to the component nested within it and generally only needed to be applied to the root component (in your case <RootContainer>

  • connect connect with the component providing store and not the component that has store provided to it.

SUGGESTED SOLUTION:

MOVE the connect to the <RootContainer> component file instead, and pass connect the RootContainer and not the App component:

export default connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);  // <<--- here :)

UPDATE:

Given the OP wants to achieve all of this in the same file, you’ll have to create a React element that represents your Redux container created from connect, so:

'use strict';
import React, { Component } from 'react';
import { createStore, applyMiddleware, combineReducers, bindActionCreators } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import * as screenActions from './redux/actions/screenActions';

import * as reducers from './redux/stores/reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

import RootContainer from './redux/views/containers/rootContainer';

// name has to be capitalised for React to recognise it as an element in JSX
const ConnectedRoot = connect(
  (state) => ({
    state: state.reducer
  }),
  (dispatch) => ({
    actions: bindActionCreators(screenActions, dispatch)
  })
)(RootContainer);

class App extends Component {
  render() {
    const { state, actions } = this.props;
    return (
      <Provider store={store}>
        <ConnectedRoot />    <------USE IT HERE
      </Provider>
    );
  }
}

More Related Contents:

  1. Global state in React Native
  2. How can I dispatch function in redux?
  3. Component won’t update when a redux state change occurs
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Understanding React-Redux and mapStateToProps()
  6. How do I access store state in React Redux?
  7. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  8. Changing the layout of a component depending on Redux state
  9. Redux Presentational Components Vs Container Component
  10. React useEffect in depth / use of useEffect?
  11. Await is a reserved word error inside async function
  12. React Native: require() with Dynamic String?
  13. What is {this.props.children} and when you should use it?
  14. What is StrictMode in React?
  15. How can I force a component to re-render with hooks in React?
  16. Is this the correct way to delete an item using redux?
  17. React: how to load and render external html file?
  18. Updating nested data in redux store
  19. Cleaner/shorter way to update nested state in Redux?
  20. Passing props into external stylesheet in React Native?
  21. When is it appropriate to use a constructor in REACT?
  22. What is prevState in ReactJS?
  23. How to prevent re-rendering of components that have not changed?
  24. redux fetch body is not use with no cors mode
  25. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  26. How to trigger off callback after updating state in Redux?
  27. having multiple instance of same reusable redux react components on the same page/route
  28. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  29. React native – objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
  30. React-native view auto width by text inside

Leave a Comment