我在嘗試將狀態傳入entityAdapter的CRUD函式時看到了TS型別錯誤
實時沙盒(注釋了錯誤的行):https://codesandbox.io/s/createentityadapter-demo-5rvl4
創建圖書適應器
const booksAdapter = createEntityAdapter<Book> ({
selectId: (book) => book.bookId,
sortComparer。(a, b) => a.title.localeCompare(b.title)
});
...創建一個片斷并配置存盤
const booksSlice = createSlice({
name: "books",
initialState: booksAdapter.getInitialState()。
reducers: {
//可以直接傳遞配接器函式作為案例還原器。 因為我們要傳遞的是這個。
//作為一個值,`createSlice`將自動生成`bookAdded`動作型別/創建者。
bookAdded: booksAdapter.addOne,
bookRemoved: booksAdapter.removeOne。
bookUpdated: booksAdapter.updateOne,
booksReceived(state, action) {
//或者,在一個案例減速器中作為 "突變 "幫助器呼叫它們。
booksAdapter.setAll(state, action.payload.books) 。
}
}
});
export const store = configureStore( {
reducer: {
books: booksSlice.reducer
}
});
......調度作業符合預期
store.dispatch(bookAdded({bookId: 1, title: "title 1" })。
store.dispatch(bookAdded({ bookId: 2, title: "title 2" })。
store.dispatch(bookAdded({ bookId: 3, title: "title 3" })。
但是當我檢索存盤狀態并試圖在對adapter.addOne的強制呼叫中使用它時,我得到了一個錯誤(即不通過reducer)
let storeState = store.getState()。
console.log("storeState", storeState, typeof storeState) 。
// booksAdapter.addOne(storeState, { id: 4, title: "title 4" });/span>
console.log的storeState看起來是一個有效的物件...
storeState
{books: Object}。
books: Object} books: Object.
ids: Array(3)
0: 1 1
1: 2: 2
2: 3: 3
entities: Object: entities.
1: Object: 1.
2: 物件3: Object: 3.
物件
但是這一行(注釋了)
booksAdapter.addOne(storeState, { id: 4, title: "title 4" })。)
結果是TS錯誤:
let storeState: {
books: EntityState<Book> 。
}
No overload匹配this呼叫。
Overload 1 of 2, '(state: EntityState<Book> , entity: Book)。EntityState<Book>',給出了以下錯誤。
Argument of type '{ books: EntityState<Book>; }'不能分配給引數of型別'EntityState<Book>'。
我不明白為什么會出現不匹配的情況,因為我是直接傳入商店的。
我已經在JS中試過了,當然沒有型別問題,它只是作業。我的問題是:如果不是 store.getState() 的結果,那么在使用 TS 時向 CRUD 函式傳遞的正確狀態物件是什么?
uj5u.com熱心網友回復:
資料在storeState.books,而不是在storeState。
所以你需要呼叫
booksAdapter.addOne(storeState.books, {id: 4, title: "title 4" })。)
注意,這不會修改你的狀態,而只是給你一個修改后的狀態副本。你只能通過一個動作調度來修改你的狀態。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/334278.html
標籤:
