Mi código:
function App({ isAuthenticated }) { const dispatch = useDispatch(); const [token, setToken] = useState() const [appLoaded, setAppLoading] = useState(false) const routes = buysellRoutes(isAuthenticated, token); const [fontsLoaded] = useFonts({ Inter_900Black, }) return ( <Provider store={store}> <ApplicationProvider {...eva} theme={eva.light}> { appLoaded && fontsLoaded ? routes : <PreLoadScreen />} </ApplicationProvider> </Provider> ) } function mapStateToProps(state) { return { isAuthenticated: state.auth.isAuthenticated, }; } export default connect(mapStateToProps)(App);Error: no se pudo encontrar "tienda" en el contexto de "Conectar (aplicación)". Envuelva el componente raíz en un , o pase un proveedor de contexto de React personalizado y el consumidor de contexto de React correspondiente a Connect (App) en las opciones de conexión.
Aquí, el problema principal es que no puede conectar el componente principal sin un proveedor, así que cree un HOC y proporcione la tienda a toda la aplicación y luego podrá conectarse.
Otra forma es que puede usar el contexto en los componentes internos, por lo que no necesita conectar el componente, solo proporcione la tienda al HOC principal.
Puede consultar este proyecto para conocer la configuración inicial de la aplicación nativa de reacción. Proyecto de inicio nativo de reacción con redux.
Hay algunos problemas con su implementación. Voy a tratar de explicarlos paso a paso:
Primero, necesita un archivo store.js para crear su tienda fuera de su App.js para más información echa un vistazo a su documentación .
En segundo lugar, el componente de la App se considera como el componente raíz en la estructura de reacción, así que evite pasar los accesorios al componente raíz, lo que claramente es incorrecto.
En tercer lugar, debe pasar la store a través de <Provider store={store} > y consumir la tienda (obtener los datos de la tienda como un estado) en los componentes o páginas con el método useSelector , y ya no necesita mapStateTopProps .
Nota: debe definir y pasar la tienda al componente de nivel superior y usarlo dentro de los elementos secundarios .
Nota: para verificar la propiedad isAuthenticated , separe su ApplicationProvider y cree un componente para él.
function SomeComponent() { const isAuthenticated = useSelector(state => state.auth.isAuthenticated) const dispatch = useDispatch(); const [token, setToken] = useState() const [appLoaded, setAppLoading] = useState(false) const routes = buysellRoutes(isAuthenticated, token); return( <ApplicationProvider {...eva} theme={eva.light}> { appLoaded && fontsLoaded ? routes : <PreLoadScreen />} </ApplicationProvider> ) } Es posible que deba enviar algunas acciones en su componente, con ganchos de reacción es fácil con useSelector y useDispatch sin mapStateToProps o mapDispatchToProps :
function SomeExampleComponent () { const dispatch = useDispatch(); const handleToggle = () => { // ... dispatch({type: "TOGGLE", payload: undefiend}) // or you can dispatch some actions that you defined before: dispatch(onToggleAction()) } return ( <div onClick={handleToggle}> // ... </div> )}