createSlice返回的reducer函数

Question

我有这两个文件从redux教程:

store.js:

import { configureStore } from '@reduxjs/toolkit'

import postsReducer from '../features/posts/postsSlice'

export default configureStore({
reducer: {
posts: postsReducer
}
})

和这是'…/features/posts/postsSlice'文件，但是导出的函数是postsSlice.reducer不是postsReducer

import { createSlice } from '@reduxjs/toolkit'

const initialState = [
{ id: '1', title: 'First Post!', content: 'Hello!' },
{ id: '2', title: 'Second Post', content: 'More text' }
]

const postsSlice = createSlice({
name: 'posts',
initialState,
reducers: {}
})

export default postsSlice.reducer

我想知道postsReducer在哪里函数，在存储中导入，来自。

Answer 1

JS中有两种类型的导出:命名导出和默认导出。

一个名为export的使用export关键字和后跟声明指定。注意，每个模块可以有多个命名的导出。例如:

export const foo = 'hello';
export function bar() {
return 'world';
}

导入命名导出，使用import关键字后跟要导入的值的名称(用大括号括起来)。例如:

import { foo, bar } from './myModule';
console.log(foo); // 'hello'
console.log(bar()); // 'world'

A默认导出是一种指定可以以任何名称导入的值的方法。但是每个模块只能有一个默认导出。下面是一个例子:

export default postsSlice.reducer

导入默认导出是通过import完成的关键字后面跟着您选择的任何标识符-因此您可以使用与导出中使用的名称不同的名称(如上面的情况)

import postsReducer from '../features/posts/postsSlice';

你可以在MDN文档中阅读更多关于JavaScript导出和导入的内容:

• 出口:https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
• 进口:https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import