Así que estoy leyendo los documentos para rtk , el ejemplo que se muestra es después de crear una porción con este código:
import { createSlice } from '@reduxjs/toolkit' const initialState = { value: 0, } export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { // Redux Toolkit allows us to write "mutating" logic in reducers. It // doesn't actually mutate the state because it uses the Immer library, // which detects changes to a "draft state" and produces a brand new // immutable state based off those changes state.value += 1 }, decrement: (state) => { state.value -= 1 }, incrementByAmount: (state, action) => { state.value += action.payload }, }, }) // Action creators are generated for each case reducer function export const { increment, decrement, incrementByAmount } = counterSlice.actions export default counterSlice.reducery luego importando el reductor en la tienda de esta manera:
import { configureStore } from '@reduxjs/toolkit' import counterReducer from '../features/counter/counterSlice' export const store = configureStore({ reducer: { counter: counterReducer, }, }) Pero lo que veo de la import es que está importando counterReducer aunque no hay una exportación de counterReducer en el archivo de segmento, ¿es una función de Redux Toolkit o una función de React o una función de JavaScript que no conozco?
Es una "exportación predeterminada" y una "importación predeterminada".
Observa que todas las exportaciones tienen un nombre, excepto
export default counterSlice.reducerEn el otro archivo, puede ver dos notaciones diferentes:
// has braces - imports the named export `configureStore` from `@reduxjs/toolkit` import { configureStore } from '@reduxjs/toolkit' // has no braces - imported the default export from the file `../features/counter/counterSlice` and gives it the name `counterReducer` for this file. import counterReducer from '../features/counter/counterSlice'Es una función de Módulos ES, por lo que es una cosa de JavaScript. Cuando exporta algo con la palabra clave default , puede importarlo con el nombre que desee y sin {} . En el archivo de corte, existe esta exportación:
export default counterSlice.reducer Y eso que puedes importarlo con el nombre que quieras, eligen llamarlo counterReducer :
import counterReducer from '../features/counter/counterSlice' Es la diferencia entre las exportaciones con named exports default exports . Para obtener más información al respecto, visite el documento para la declaración de exportación o los módulos de JavaScript en MDN.