We Keep Coding

Why export default doesn't work in this simple code?

Why when I use export default on index.js module it says:
export 'appReducers' (imported as 'appReducers') was not found in './reducers/index' (possible exports: default), but when I change it to module.exports the error go away, why is that?
At redux.js
import { appReducers } from './reducers/index'
const Store = () => {
console.log(appReducers);
}
export default Store
in index.js
const appReducers = "hello world";
export default appReducers
in app.js
import React, { useState, useEffect, useMemo } from 'react';
import Store from './redux'
function App() {
Store();
return (
<div>
</div>
);
}
export default App;

The problem is in redux.js. Instead of
import { appReducers } from './reducers/index'
You need
import appReducers from './reducers/index'
What you were doing before was a named import, not a default import.

Running test cases to test a function using Jest

I am trying to test few test cases for a function where it takes two parameters. these two parameters along with the result I have defined it in three different files and then exporting it. I am using Jest for the same, but it is throwing "TypeError: (0 , _index.default) is not a function" error. Can some one tell where I am going wrong. Testing this in the sandbox
test file:
import appendToFilter from "./index";
import { res1, res2, res3, res4, res5, res6, res7, res8 } from "./Results";
import { src1, src2, src3, src4, src5, src6, src7, src8 } from "./Source";
import { ip1, ip2, ip3, ip4, ip5, ip6, ip7, ip8 } from "./Input";
test("case1", () => {
expect(appendToFilter(src1, ip1)).toBe(res1);
});
index.js
export function appendToFilter(filter, inputObjects) {
// logic here
}
Link: https://codesandbox.io/s/optimistic-mirzakhani-pogpw-so-b47y8

You are importing the function as a default import but you exported it as a named export. Go to your index.js and
export default appendToFilter
or import the function as the named import it is by doing:
import { appendToFilter } from "./index";
instead of:
import appendToFilter from "./index";

It's because you don't have any default export and you are importing appendToFilter from index without named import.
use
import { appendToFilter } from "./index";
instead of
import appendToFilter from "./index";

How to Reduce import from react

I'm trying to reduce the amount of imports in my react files, I how do I group the imports so I can use the { } to get more then one from a file.
// assets
import location from "../../assets/home/header/location.svg";
import banner from "../../assets/home/header/banner.jpg";
import delivery from "../../assets/home/section-a/delivery.svg";
import arrow from "../../assets/home/section-b/arrow.svg";
import stock1 from "../../assets/home/section-c/stock-1.jpg";
import stock2 from "../../assets/home/section-c/stock-2.jpg";
import stock3 from "../../assets/home/section-c/stock-3.jpg";
// components
import IconList from "./IconList";
import Image from "../../components/Image";
import DisplayCard from "../../components/CardGroup/DisplayCard";
import ListDetail from "../../components/CardGroup/ListDetail";
import Slide from "../../components/Slide/index";

Images, SVG and those kind of files you cannot use named export the only way is to
import them one by one
You can use named export {} for example for multiple functions or variables in same file.
export const example = () => () ;
so you can after
import them like :
import {example, example2,example3} from "./examples";
or using the * to import all the export functions or variables
import * as Foo from "./examples";
const x = Foo.example();

is it possible to destrucure my import statements

i want to write below import in one single line. is it possible?
`import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';`

No.
Destructuring would let you import many values from one module.
You can't import multiple modules at once.
A typical pattern here would be to have an ../adaptors/index which imported all the modules and then exported them:
import SellerAdaptor from './sellers';
import UserAdaptor from './user';
// etc
export { SellerAdaptor, UserAdaptor, etc };
Then you would be able to:
import { SellerAdaptor, UserAdaptor, etc } from "../adaptors/index";

To be able to write import { A, B, C } from 'myPackage', it's upon myPackage and how it has been written.
If they are different files, you can't do it.
If you have one file adaptors that export the different modules, you can write your imports with the destructuring.

You can do like as follows:
import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';
export {
SellerAdaptor,
UserAdaptor,
ShopEarnAdaptor,
ProductAdaptor,
JobAdaptor,
OrderAdaptor,
NotificationAdaptor,
CategoryAdaptor,
AdminAdaptor
}
And Then You can Import like as follows
import { SellerAdaptor, UserAdaptor} from './<filename>'

Module not found: Can't resolve './reducers' when multiple reducers

i'm trying to combineReducers
Folder Structure
src
reducers
authReducer.js
lojaReducer.js
index.js
at Index.js i'm importing it
import {lojaReducer, authReducer} from './reducers';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
const authPersistConfig = {
key: 'auth',
storage: storage,
blacklist: ['somethingTemporary']
}
export const Reducers = combineReducers ({
authState: persistReducer(authPersistConfig, authReducer),
lojaState: lojaReducer
});
but i'm getting the error
Module not found: Can't resolve './reducers'
when i do only with lojaReducer it works, how can i do to import multiple reducers?

Since the reducers are in separate files, you need to import them separately.
Something like :
import authReducer from './authReducer'
import lojaReducer from '. /lojaReducer'
Or
import { authReducer} from './authReducer'
import { lojaReducer} from './lojaReducer'
Depending if they are defined as export or export default