Import and export reducer with React-Redux - javascript

I'm studying React-Redux and I have an example like this
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp /*from reducers*/
then I have
import reducer from './reducers'
const store = createStore(reducer)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
So, it didn't export anything as reducer in ./reducers, and the syntax import is not either import * as reducer in ES6. Why does it work ?

export default todoApp
So when the import reducer from './reducers' is called the todoApp is stored inside reducer. Thats why we use the default keyword. The variable name doesn't need to be reducer it can be anything.
By using default keyword a single value or a fallback value is passed to the file that imports it
Similarly if we exported a function without default
eg
export function someFunc(){...}
We can import it by
import {someFunc} from '/file/path.js'
EDIT : There can only be one default export from a file. When we import other components we need to specify the component name as identifier(eg {someFunc}). For default imports we can use any identifier we want.
Read more about import here

export default todoApp
So whenever you "'import xyz from './reducers'" ,reducer.js will return
todoApp beacuse by default reducer.js is returning it. No matter what
name you give ,you can change 'import reducers from "./reducers"' to
'import red from ./reducers' it will work in that case also .
only one thing you should keep in mind ,that whenever importing
default element you should avoid applying '{}' around the imported
element . so in your case "import {reducer} from './reducer'" would
be wrong.
But if you write "export const todoApp" in reducers.js ,then in that
case you have to give exact name while importing it, now you have to
import it as 'import {todoApp} from './reducers'
And There should be only one default export from a file.

When you export something as default from a module, you basically exporting an anonymous variable. So when you import anything like this import something from 'somewhere' the something can be any name you choose to use inside the file that does the import.

Related

(import from default export) Is the root reducer in Redux automatically called 'rootReducer'?

I'm going through many Redux-tutorials, and something that confuses me, is the fact, that when creating a Redux store with a combined reducer, there often is the reference to a name rootReducer as the root reducer, although it has never been actively named.
Is this something like a default behaviour that is taken advantage of? Because it seems to be working like that.
I suspect, it has something to do with the way, the reducers are combined and exported
with
export default combineReducers.
Here is an example:
./reducers/combined.js :
import { combineReducers } from 'redux';
import filmReducer from './filmReducer';
export default combineReducers({
media: filmReducer
});
then, in ./store.js :
import { createStore, applyMiddleware } from 'redux';
...
import rootReducer from './reducers'; // why can 'rootReducer' be imported?
Anyway, after a long search, I still couldn't find any reference to this phenomena.
You reducer is exported as a default and default imports can be given any name
You could have also called it reducer too. It just depends on what you want to call it
import reducer from './reducers';
Had you not exported the reducer as default but a named export you are expected to use the same name while import
For Example:
import { combineReducers } from 'redux';
import filmReducer from './filmReducer';
export const reducer = combineReducers({
media: filmReducer
});
will be imported as
import { reducer } from './reducers/combined';
P.S. You must also note that you can import component from index.js within a directory without specifying the index file in import path. However for any other file name you need to mention the file name for import
Please refer the MDN docs on import
Reducer is a function that takes previous state, the action, then returns a new state.
(previousState, action) => nextState
In redux, there is only one reducer function. It handles all the actions and returns the new state. This reducer function is usually called rootReducer, but you can call it whatever you want. When you create the store, the first argument is the root reducer.
createStore(reducer, [preloadedState], [enhancer])
(check out the doc: https://redux.js.org/api/createstore)
As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state.
The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.
This is from the official documentation to explain what is combineReducers: https://redux.js.org/api/combinereducers
In your code:
export default combineReducers({
media: filmReducer
});
combineReducers returns a reducer function as mentioned above. export default will then export the function so that you can import it from ./store.js
If you want to know more about how import/export works, check this https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

How can components be imported with "import * as {name}" syntax in react native?

In a react-native project, I would prefer to be able to import all my component like I do with types in my reducers.
I want to be able to write:
import * as Components from '../components'
so I went to my components folder, created an index.js file, imported all the basic components, and exported them like export const ComponentExample1 = ComponentExample1 & export const ComponentExample1 = <ComponentExample/>. I figured there might be some naming related errors and thats what seems to have happened because I get the error:
Error: TransformErro SyntaxError: ......index.js: Identifier "ComponentExample1" has already been declared
All of my basic components are exported intra-component as export default ComponentExample1
How can I change my approach to effect my end desire?
You can re-export your default exported components in index.js
Example:
export { default as RoundButton } from './RoundButton'
export { default as Logo } from './Logo'
Delete
export const ComponentExample1 = ComponentExample1
and only keep
export const ComponentExample1 = <ComponentExample />

import { Component, Vue } from "vue-property-decorator" vs. import Vue from "vue"

What's the difference and use cases between importing Vue from vue-property-decorator and vue? What I understood I need to import Vue from vue-property-decorator always when defining a custom component with a #Component decorator, but are there any unexpected/different things/scenarios related to the Vue's core which I should be aware when doing so?
I would say that there is no difference according to sources of vue-property-decorator.
vue-property-decorator just does the following:
import Vue, { PropOptions, WatchOptions } from 'vue'
// ...
export { Component, Vue, mixins as Mixins }
Possible that it is done to reduce number of imports in your code:
import {Vue, Smth1, Smth2}` from 'vue-property-decorator';
vs
import Vue from 'vue';
import {Smth1, Smth2} from 'vue-property-decorator';
Let's say you have a very simple module named 'some-module', in it you have:
var foo = 'bar';
export default foo;
export function helloWorld () { ... };
When you do:
import something from 'some-module';
you are only importing the default export of 'some-module'. In this case, it is the string foo. The default export can be anything, object, function, etc.
When you do:
import {helloWorld} from 'some-module';
You are specifically importing a member of 'some-module' named 'helloWorld' and not the default export. In this case, it is the function 'helloWorld'.
If you had done:
import {something} from 'some-module';
The 'something' would be 'undefined' since there is no export for with that name.
You can read more here

Exporting default class complains about name

In the MDN docs they use export default class {} and importing it with:
import Whatever from './myFile'
should work.
This is not working in my case, because I export my class like this:
export default class LoginForm extends Component { }
And import it like this:
import LoginForm from './user/LoginForm';
Resulting in the following error:
123:30-39 './components/user/LoginForm' does not contain an export named 'LoginForm'.
When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
Why does it complain about a name anyways if it is a default export?
Thanks in advance,
Mike
When i add export default LoginForm at the end of my LoginForm file it works, but this feels unneccessary.
It might seem unneccessary, but this is a convention that you will often see.
I guess you are creating a React Component here, keep in mind, that you often have HoC (higher order components) that need to wrap your component export.
Here is an example:
export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);
Therefore it makes sense, to put exports at the end of your file.
Note: I could not reproduce your error, when I exported a component like this:
export default class App extends Component { ... }
This worked for me.

React : best way to Import / Export

I'm creating a project in React and I'm not sure if the approach to import/export is right.
I'm exporting my components with an index.js file inside my Components folder like this:
export {default as Card} from './Card/Card'
export {default as CardList} from './CardList/CardList'
Each component is a const and I'm exporting it as:
export default Card and export default CardList
I'm using export default two times
in the index.js
in each component file
Is this the best practice to use an index file to export the components?
Thanks!
You can keep exporting your components as default, and in your index.js you can export them like:
export Card from './Card/Card';
export CardList from './CardList/CardList';
then when using these, you can do:
import {Card, CardList} from 'components';
Your point of contact (index.js) Feels less verbose

Categories