I have an actions folder with the usual types.js file for my action type constants, plus an index.js file that does the following
import axios from 'axios';
import { browserHistory } from 'react-router';
import {
AUTH_USER,
UNAUTH_USER,
AUTH_ERROR,
FETCH_MESSAGE
} from './types';
and also exports functions for all my actions. I'm wondering, is there a way I can create multiple files for defining my actions so index.js doesn't become too long, then import those into my index.js so in my components I can still just do for example import { loginUser } from '../../actions'; and not have to worry about which file the action is coming from?
Assuming you have the following directory structure:
actions/
index.js
types.js
ProductActions.js
Inside your actions/index.js, write:
export * from './ProductActions';
Then define ProductActions.js as something like:
import axios from 'axios';
import { ... } from './types';
export const fetchProducts = () => { ... };
export const deleteProduct = () => { ... };
Remember to also update your reducers with the new action types file:
import { ... } from '../actions/types'
Say for example we have two actions files; actionsA and ActionsB.
Suppose in actionsA we have the following action functions.
//actionsA
//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}
export function functionActionsA2(){ /* action body ActionsA2 */}
and in actionsB we have the following code:
//actionsB
//You can import your actionTypes here
export function functionActionsB1(){ /* action body ActionsB1 */}
export function functionActionsB2(){ /* action body ActionsB2 */}
Say we have a folder actions containing the two files; actionsA and actionsB, and an index.js file.
actions/
index.js
actionsA.js
actionsB.js
In index.js file we import the different actions from actionsA and actionsB and then exports the imported functions.
//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'
export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2
Now you can just import your index file and get the actions you would want to use as shown below:
import {functionActionsA1,functionActionsB2} from '../../actions/index'
Related
I was using this tutorial, and after doing all 5 steps, I ran the server and I saw this error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.
[...auth0].js file:
import { handleAuth } from '#auth0/nextjs-auth0';
export default handleAuth();
_app.js file:
import Layout from '../components/layout';
import { useState, createContext, useEffect } from 'react';
import AppContext from '../components/AppContext';
import '../styles/globals.css';
import { SessionProvider } from 'next-auth/react';
import { UserProvider } from '#auth0/nextjs-auth0';
function MyApp({ Component, pageProps }) {
return (
<UserProvider>
<div>
<Layout>
<Component {...pageProps} />
</Layout>
</div>
</UserProvider>
);
}
export default MyApp;
.env.local file:
AUTH0_SECRET="valid"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="valid"
AUTH0_CLIENT_ID="https://valid"
AUTH0_CLIENT_SECRET="valid"
I was not getting this error, but when I applied those changes, I got that error.
Why am I getting this error?
The quickstart in the official website says we have to import UserProvider using this:
import { UserProvider } from '#auth0/nextjs-auth0/client';
So I tried that and it worked.
I encounter a strange behavior with pinia in a Vue3 app.
I created a little app with a pinia store using option API.
Here is my main.js with creating the store :
import { createApp } from "vue";
import { createPinia } from "pinia";
// Vue Router
import index from "./router";
// import { useAspergesStore } from "./store/storeAsperges";
import App from "~/App.vue";
import "~/styles/tailwind.css";
import "~/styles/main.scss";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(index);
app.mount("#app");
Here is my store :
import { defineStore } from 'pinia'
import axios from "axios";
export const useAspergesStore = defineStore('asperges', {
state: () => ({
listeCueilleurs: JSON.parse(localStorage.getItem("listeCueilleurs")) || [],
}),
getters: {
...
},
actions: {
...
},
})
And I call the store from my components :
import { useAspergesStore } from '../../../store/storeAsperges.js';
import { mapStores } from 'pinia';
...
computed: {
...mapStores(useAspergesStore),
},
When I start the web page, I can't get the datas from the store, even on a reload. The store is not loaded.
When I open the devTools in chrome, it doesn't show that the store is loaded.
When I click on the vueDevTools, the store loads and the datas appear in the web page.
I get the message in the console :
"🍍 "asperges" store installed 🆕"
It's like starting the vueDevTools triggers the store. And all work fine after that.
If you have any idea of what I'm doing wrong, any help would be appreciated.
Ok I found a solution. I don't know if it's the right one, but it works.
I just tried to call the store from the component in the mounted() hook and now the store loads correctly.
But anyway, I don't know why the store didn't load even if the datas were used in the components...
I'm trying to implement switch case for my products in Redux. I'm importing the cases from a file named productConstants using multiple export defaults. Problem is, the moment I write multiple lines, my screen turns red with this error 'A module cannot have multiple default exports.ts(2528)'
productReducers.js file
ALL_PRODUCTS_REQUEST,
ALL_PRODUCTS_SUCCESS,
ALL_PRODUCTS_FAIL} from '../constants/productConstants'
export const productsReducer = (state ={ products: [] }, action => {
switch(action.type) {
default:
return state;
}
})
my productConstants.js file
```export default ALL_PRODUCTS_REQUEST = 'ALL_PRODUCT_REQUEST'
export default ALL_PRODUCTS_SUCCESS = 'ALL_PRODUCT_SUCCESS'
export default ALL_PRODUCTS_FAIL = 'ALL_PRODUCT_FAIL'
export default CLEAR_ERRORS = 'CLEAR_ERRORS'
here is my store.js file
```//import { configureStore } from '#reduxjs/toolkit'
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'
const reducer = combineReducers({
})
let initialState = {}
const middleware = [thunk];
const store = createStore( reducer, initialState, composeWithDevTools(applyMiddleware(...middleware)))
export default store;
and finally, my index.js file
```import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from 'react-redux'
import store from './store'
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
How do I do away with this error? A module cannot have multiple default exports.ts(2528)
productConstants.js(1, 1): The first export default is here.
A module can have only one default export per module, meaning that in one JS file only one variable (or function) can be exported with the default keyword.
You can convert them all to named export:
export const ALL_PRODUCTS_FAIL = 'ALL_PRODUCT_FAIL'
How would I go about accessing my redux-store in a helpers.js file (basically a file full of functions that help derive/manipulate certain data that DEPEND ON THE STORE)?
The thing is I can't just do import store from './mystore' because of the way I am exporting it in my configureStore.js:
export default () => {
let store = createStore(persistedReducer, {}, applyMiddleware(ReduxThunk));
let persistor = persistStore(store);
return { store, persistor };
}
then I import this in my App.js into a PersistGate to wait for the store to get rehydrated:
import React, { Component } from 'react';
import Router from './Router';
import { Provider } from 'react-redux';
import configureStore from './configureStore';
import { PersistGate } from 'redux-persist/integration/react';
export default class App extends Component {
render() {
return (
<Provider store={configureStore().store}>
<PersistGate loading={null} persistor={configureStore().persistor}>
<Router />
</PersistGate>
</Provider>
);
}
}
This is why the app has access to the store through props, but I have no idea how to access this hydrated state without a React.Component.
If I import this and call store.getState() I get a new store (i.e. a new store with the initial state and not the actual persisted store that contains the local data).
Since all you export is a function that creates a new store you can't.
Without context (e.g., there might be a reason you're doing this, although I can't fathom what it is) just create the store outside the default exported function.
You can still export the function as default, and store as a named export.
image of the ERROR
OK so I'm starting a new project and this is the first time that this has happened to me/ I keep getting an error stating ×
TypeError: middleware is not a function i checked dependencies and everything seems fine gone over my code nothing seems wrong please help
I tried deleting the modules and installing them again, I also checked on a passed application I've been doing and since I'm just starting out the code looks identical but that seems to work.
import { createStore, applyMiddleware } from "redux";
import promiseMiddleware from "redux-promise-middleware";
import userReducer from "./ducks/userReducer";
const middleware = applyMiddleware(promiseMiddleware());
const store = createStore(userReducer, middleware);
export default store;
import React, { Component } from "react";
import routes from "./routes";
import { Provider } from "react-redux";
import store from "./redux/store";
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="App">{routes}</div>
</Provider>
);
}
}
export default App;
When you use the function applyMiddleware, the middlewares shouldn't be called as functions.
So instead of:
const middleware = applyMiddleware(promiseMiddleware());
do:
const middleware = applyMiddleware(promiseMiddleware);
See https://redux.js.org/api/applymiddleware#example-custom-logger-middleware for more details.