Redux 教程示例中 counterReducer 是如何生成的

Question

我正在阅读 Redux 官方教程。当我看到counterReducer任何模块中都没有有价值且有效的功能时，我感到很惊讶！我找不到它的任何描述，但是：

因为我们知道 counterReducer 函数来自 features/counter/counterSlice.js，所以让我们逐个查看该文件中的内容。

我什至将切片器的名称更改为 counter3，但它仍然有效！

谁能向我描述一下它是如何生成的？

counterSlice.js

import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
  name: 'counter3',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export const incrementAsync = amount => dispatch => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 1000);
};

export const selectCount = state => state.counter.value;

export default counterSlice.reducer;

store.js （我们在 store.js 模块中使用它）

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';  //HERE IS THE IMPORTING PLACE

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

https://redux.js.org/tutorials/essentials/part-2-app-struct#creating-slice-reducers-and-actions

Answer 1

使用counterSlice.jsES6“默认导出”导出由以下生成的减速器函数createSlice：

export default counterSlice.reducer;

然后任何其他文件都可以使用“默认导入”来获取对该减速器函数的引用。然而，当我们默认导入一个值时，我们可以给它任何我们想要的名称：

// fileA.js
import counterReducer from "./features/counter/counterSlice"

// fileB.js
import someReducer from "./features/counter/counterSlice"

// fileC.js
import fred from "./features/counter/counterSlice"

所有这三个变量都将指向同一个减速器函数 - 这只是我们创建的局部变量名称是什么的问题。

因此，在本例中，counterReducer变量 instore.js是对从文件导出的化简器函数的引用counterSlice.js。