Could not find "store" in either the context or props of "Connect(App)"
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>
);
}
}