在Redux工具包中导入还原器如何工作？

Question

因此，我正在阅读有关 rtk 的文档，所示的示例是在使用此代码创建切片之后：

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.reducer

然后在商店中导入还原器：

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

但是我从<<<代码>导入是它导入反向，尽管在​​切片文件中没有反向导出，但Redux Toolkit功能或React功能或A React功能或一个我不知道的JavaScript功能？

Answer 1

这是“默认导出”和“默认导入”。

您注意到所有出口都有一个名称 - 除了

export default counterSlice.reducer

在另一个文件中，您可以看到两个不同的符号：

// 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'

Answer 2

这是ES模块功能，因此是JavaScript的事情。当您用默认关键字导出某些内容时，可以使用所需的任何名称导入它，而没有 {} 。在slice文件中，有一个导出：

export default counterSlice.reducer

您可以用所需的名称导入它，他们选择将其称为 underducer ：

import counterReducer from '../features/counter/counterSlice'

它在 nequ name enfort 和<代码>默认导出。要了解更多信息，请访问 extort 语句或 javascript模块 mdn上。