Redux - @reduxjs/toolkit

Հղումներ
----------------

[Lincoln]

Հետաքրքիր էր Ռուբեն ջան։ Ինչքան էլ գիտեի React-Redux մեկա նոր ինֆորմացիա ստացա։ Շնորհակալություն։ Եթե ծանոթ ես React test - երին, հետաքրքիր կլինի նայել Քո մատուցմամբ։

[arusik_]

Ողջույն եւ շնորհակալություն ինֆոյի համար։ Էսպիսի մի հարց՝ երկու տարբեր կոմպոնենտներ ունեմ, որոնցից ամեն մեկն իր useEffect-ում dispatch է անում ասինխրոն action, բայց այնպես է ստացվում, որ 2 request-ի փոխարեն 4-ն է գնում, այսինքն՝ app-ը 2 անգամ իրար հետեւից re-render է լինում։ Փորձեցի createSelector-ով, useMemo-ով կարգավորել, չստացվեց։ Ինչպե՞ս ֆիքսեմ էս խնդիրը։

[davittorgomyan]

Ruben jan shat shnorhakal enq dzez, ays ashxatanqi hamar, gnahatum enq dzer mec ashxatanq@, shnorhakalutyun dzer amboxj timin, thanks

[mihrankhachatryan]

Shat lav eq bacatrum, shat hetaqrqir kliner tesnel typescript + redux )

[melsvagharshyan]

Ruben jan, isk karox enq extraReducers-i mej orinak unenal mi qani fulfilledov case-er?

[eduardgrigoryan]

Barev dzez Ruben jan, merci, shat parz u haskanali eq bacatrum. Mi harc unem miayn. Ete mi qani slice unenq, voric mekum reduxThunk e ogtagorcvac serveric dat berelu hamar. Ev ayd data-n mez petq e ogtagorcenq urish slice-i mej. Da hnaravor e iragorcel?

[davittorgomyan]

barev dzez Ruben jan isk inch mijocner kan kayqi lezun poxelu, kaseq vortexic ev inch karoxem sovorel?

[erikgreyan]

Բարև ձեզ։ Կարող եք ասել if else ով բան եմ գրում հիմա ուզում եմ գրեմ երբ else լինի index.js ֆայլը չաշխատի իսկ եթե if լինի աշխատի։ Հիմա ոնց պետքա գրեմ

[MejYan]

@reduxjs/toolkit իմ նայած ամենամատչելի վիդեոնա: Շնորհակալություն!

[eduardgrigoryan]

Barev dzez Ruben jan. Senc mi harc, es unem mi zangvac questionneri, es karogh em avelacnel ayd zangvacin question, edit u delete anel. u ed ameny es mi slice-um em grel, vor mi hat initialState lini. Bayc mtacum em vor aveli chishte vor 3 slice unenam edit-i, delete-i u add i hamar arandzn, ughaki ed depqum 3 initialState kunenam, u parz chi ete mekum question avelacnem, myus 2nel kpoxven te che. Vonce chisht?? arandzin te mi slice-um??

import {
createSlice, createAsyncThunk, PayloadAction,
import { Question } from
import fetchData from '../../services/fetchData';
import {
EditQuestionPayload, PeersState, PostQuestionsPayload, RemoveQuestionPayload,
} from

// Define the initial state for the "peers" slice
const initialState: PeersState = {
questionsWithId: [],
questionsWithIdToMentor: [],
isLoading: false,
isOpen: false,
section: true,
errorMessage: '',
};

// Define an async thunk for posting questions to the server
export const addQuestion = createAsyncThunk(
'discussionForum/addQuestion',
async (payload: PostQuestionsPayload, { rejectWithValue }) => {
try {
const {
enrolledCourseId, text, token, sectionName,
} = payload;
const body = {
text,
};
const response = await fetchData.post(
`courses/enrolled/${enrolledCourseId}/${sectionName}-questions`,
body,
{},
token,
);
const responseJSON = await response.json();
const { id, createdDate } = responseJSON;
const newQuestion: Question = {
id,
text,
createdDate,
};
return newQuestion;
} catch (error) {
return rejectWithValue('Failed to fetch peers questions');
}
},
);

// Define an async thunk for editing a question
export const updateQuestion = createAsyncThunk(
'discussionForum/updateQuestion',
async (payload: EditQuestionPayload, { rejectWithValue }) => {
try {
const {
enrolledCourseId, questionId, newText, token, sectionName,
} = payload;

const body = {
text: newText,
};
const response = await fetchData.put(
`courses/enrolled/${enrolledCourseId}/${sectionName}-questions/${questionId}`,
body,
{},
token,
);
const responseJSON = await response.json();
const updatedQuestion: Question = { id: questionId, text: newText, createdDate: responseJSON.createdDate };
return updatedQuestion;
} catch (error) {
return rejectWithValue('Failed to edit Question');
}
},
);

// Define an async thunk for removing a question
export const removeQuestion = createAsyncThunk(
'discussionForum/removeQuestion',
async (payload: RemoveQuestionPayload, { rejectWithValue }) => {
try {
const {
enrolledCourseId, questionId, token, sectionName,
} = payload;
await fetchData.delete(
`courses/enrolled/${enrolledCourseId}/${sectionName}-questions/${questionId}`,
{},
token,
);
return payload.questionId;
} catch (error) {
return rejectWithValue('Failed to remove question');
}
},
);

export const UpdateQuestionSlice = createSlice({
name: 'peers',
initialState,
reducers: {
onClose: (state) => {
state.isOpen = false;
},
onOpen: (state) => {
state.isOpen = true;
},
changeSection: (state, action) => {
state.section = action.payload;
},
},
extraReducers: (builder) => {
builder
.addCase(addQuestion.pending, (state) => {
state.errorMessage = '';
state.isLoading = true;
state.isOpen = false;
})
.addCase(addQuestion.fulfilled, (state, action) => {
// Update state with the newly posted question
if (state.section)
else
state.isLoading = false;
state.errorMessage = '';
})
.addCase(addQuestion.rejected, (state, action) => {
// Update state with error message when addQuestion request is rejected
state.errorMessage = `${action.payload}`;
state.isLoading = false;
})
.addCase(updateQuestion.pending, (state) => {
state.errorMessage = '';
state.isLoading = true;
})
.addCase(updateQuestion.fulfilled, (state, action) => {
const { id } = action.payload;
const currentQuestionPeers = => question.id === id);
if (currentQuestionPeers && state.section) currentQuestionPeers.text = action.payload.text;
const currentQuestionMentor = => question.id === id);
if (currentQuestionMentor && !state.section) currentQuestionMentor.text = action.payload.text;
state.isLoading = false;
state.errorMessage = '';
})
.addCase(updateQuestion.rejected, (state, action) => {
state.isLoading = false;
state.errorMessage = `${action.payload}`;
})
.addCase(removeQuestion.pending, (state) => {
state.isLoading = true;
state.errorMessage = '';
})
.addCase(removeQuestion.fulfilled, (state, action: PayloadAction<string>) => {
const questionIdToRemove = action.payload;
if (state.section) state.questionsWithId = => question.id !== questionIdToRemove);
else state.questionsWithId = => question.id !== questionIdToRemove);
state.isLoading = false;
state.errorMessage = '';
})
.addCase(removeQuestion.rejected, (state, action) => {
state.isLoading = false;
state.errorMessage = `${action.payload}`;
});
},
});

export const { onOpen, onClose, changeSection } = UpdateQuestionSlice.actions;
export default UpdateQuestionSlice.reducer;

[davittorgomyan]

u noric grem const fetch2 = createAsync() ? mekel ete hnaravora mi erku barov kaseq id inchi hamar e trvum -> counter/fetchCount ?

[davittorgomyan]

Barev Dzez, Ruben jan Mi harc tam eli, redux Toolkit em ogtagorcum, u states mej funkciayem kanchel, errora talis, kbacatreq inchu,

const initialState = {
img:[
{id:Math.random(), color:"rgba(245, 150, 27, 1)", name:"ИдеяСкеч", typing:["type1", "type2"] , images:sketchSvg() },
],
};
images:sketchSvg();stex Errora talis u gruma
index.js:1 A non-serializable value was detected in the state
Vonc karoxem Shtkel,