טיפ רידאקס - השתמשו ב preloadedState כדי לבדוק יותר בקלות
12/11/2022
בדוגמת ההתחלה מהירה של Redux Tolkit הם יוצרים וימייצאים את מחסן המידע באותה שורה באופן הבא:
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'
export const store = configureStore({
reducer: {
counter: counterReducer,
},
})
שינוי קטן והקוד הזה הופך להרבה יותר קל לבדיקה. במקום ליצור ולייצא את ה store אני כותב פונקציה שיוצרת store חדש, וגם יודעת לקבל preloadedState:
export function createStore(initialState) {
return configureStore(Object.assign({}, {
reducer: {
counter: counterReducer,
},
},
initialState ? { preloadedState: initialState } : {}));
}
וככה אני יכול להשתמש בפונקציה כדי לבדוק את ה store בכל state ראשוני שארצה:
test('inc from 10 to 11', () => {
const store = createStore({ counter: { value: 10 }});
store.dispatch(increment());
expect(store.getState().counter).toEqual({ value: 11 });
});
יותר מזה, אפשר להשתמש ב createStore כמה פעמים, למשל בהפעלה אחת לא להעביר פרמטרים וככה לקבל את ה State הראשוני המלא, להוציא אותו מה store, לשנות רק את הערכים שצריכים לבדיקה ואז להפעיל createStore שוב עם הסטייט שיצרתם.