Tengo problemas con Redux mal configurado después de fusionar el contenido de varios archivos en uno para que sirva como configuración para Redux.
¿Cómo resolver store , manteniendo esto en un archivo?
Excepción de JS no controlada: no se pudo encontrar "tienda" en el contexto o los accesorios de "Conectar (aplicación)". Envuelva el componente raíz en un , o pase explícitamente "almacenar" como accesorio a "Conectar (aplicación)".
'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'; class App extends Component { render() { const { state, actions } = this.props; return ( <Provider store={store}> <RootContainer /> </Provider> ); } } export default connect( (state) => ({ state: state.reducer }), (dispatch) => ({ actions: bindActionCreators(screenActions, dispatch) }) )(App);Provider, pasa el almacén al componente anidado dentro de él y, por lo general, solo es necesario aplicarlo al componente raíz (en su caso, <RootContainer>
connect conectar con el componente que proporciona la tienda y no con el componente que tiene la tienda proporcionada.
MOVER la connect al archivo del componente <RootContainer> en su lugar, y pase la connect al RootContainer y no al componente de la aplicación:
export default connect( (state) => ({ state: state.reducer }), (dispatch) => ({ actions: bindActionCreators(screenActions, dispatch) }) )(RootContainer); // <<--- here :)Dado que el OP quiere lograr todo esto en el mismo archivo, deberá crear un elemento React que represente su contenedor Redux creado desde connect, entonces:
'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> ); } }Tuve tal problema cuando usé:
import connect from "react-redux/lib/connect/connect";en lugar de eso, usa:
import {connect} from "react-redux";En su índice raíz, coloque el proveedor.
<Provider store={store}> <App /> </Provider>,