{"id":374173,"date":"2024-05-21T05:53:54","date_gmt":"2024-05-21T05:53:54","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=374173"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=374173","title":{"rendered":"Redux \u044d\u0442\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442, \u0430 Mobx \u043d\u0435\u0442! \u041d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\"\"<\/figure>\n

\u041d\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043d\u0435\u0434\u0435\u043b\u0435 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u043e\u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0432 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u043f\u043e Frontend, \u0433\u0434\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0447\u0438\u043a\u043e\u0432, \u0440\u0430\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a \u0443\u0434\u0430\u0447\u043d\u043e \u0435\u0433\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0430 \u0441 Redux \u043d\u0430 Mobx. \u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u043d \u043d\u0430\u0437\u0432\u0430\u043b \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 \u0438 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0440\u0430\u0437\u0430.<\/p>\n

\u042f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u043a\u043b\u0430\u0434\u044b, \u0433\u0434\u0435 \u0432\u0441\u0435 \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e Mobx \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c Redux. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0438 \u0442\u0430\u043a, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0434\u0435\u0442 Redux, \u0430 \u043d\u0435 Redux-Toolkit, \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e. \u041f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 Mobx \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448 \u043a\u0430\u043a \u043e \u043d\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u044f\u0442.<\/p>\n

\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0430\u0434\u0435\u043f\u0442\u043e\u0432 Mobx \u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a<\/p>\n

\n

\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Redux \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043d\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c action-\u044b \u0438 selectors-\u044b.<\/p>\n<\/blockquote>\n

\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c.<\/p>\n

import { makeAutoObservable } from \"mobx\"; import { IPromiseBasedObservable, fromPromise } from \"mobx-utils\";  \/* \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f *\/ const PostListSchema = z.object({   id: z.number(),   title: z.string(),   description: z.string(),   tag: z.string(),   tags: z.array(z.string()),   image: z.string(),   progress: z.number(),   progressTotal: z.number() })  type PostListModel = z.infer<typeof PostListSchema>  \/* \u0417\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 *\/ export const fetchPostList = async (limit: number) => {   try {     const response = await _api.get<PostListModel[]>(`api\/posts`)      if (!response.data) {       throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")     }      return response.data.data   } catch {     throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")   } }   \/* \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u0430 *\/ class PostListStore {     posts?: IPromiseBasedObservable<PostListModel[]>     counter: 0      constructor() {         makeAutoObservable(this)     }      incrementCounter = () => {       this.counter += 1     }      decrementCounter = () => {       this.counter -= 1     }      fetchCoursesData = (limit: number) => {         this.courses = fromPromise(fetchPostList(limit))     } }  export const postListStore = new PostListStore() <\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 Redux-Toolkit. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0437\u044f\u0442\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043e\u0446\u0435\u043d\u043a\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c chatGPT \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0437\u0430 \u043d\u0430\u0441.<\/p>\n
import { createSlice, PayloadAction } from \"@reduxjs\/toolkit\"; import { AppThunk } from \".\/store\";  \/* \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f *\/ interface PostListState {   posts: PostListModel[] | null;   loading: boolean;   error: string | null;   counter: number; }  const initialState: PostListState = {   posts: null,   loading: false,   error: null,   counter: 0, };  \/* \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0441\u0430 *\/ const postListSlice = createSlice({   name: \"postList\",   initialState,   reducers: {     incrementCounter(state) {       state.counter += 1;     },     decrementCounter(state) {       state.counter -= 1;     },   },   extraReducers: (builder) => {     builder       .addCase(fetchPostListAsync.pending, (state) => {         state.loading = true;         state.error = null;       })       .addCase(fetchPostListAsync.fulfilled, (state, action: PayloadAction<PostListState[]>) => {         state.loading = false;         state.posts = action.payload;       })       .addCase(fetchPostListAsync.rejected, (state, action) => {         state.loading = false;         state.error = action.error.message ?? \"\u041e\u0448\u0438\u0431\u043a\u0430\";       });   }, });  export const { incrementCounter, decrementCounter } = postListSlice.actions;  export default postListSlice.reducer;  \/* \u0417\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 *\/ export const fetchPostListAsync = createAsyncThunk(\"fetchPostList\", async () => {   try {     const response = await axios.get(\"\/api\/posts\")      if (!response.data) {       throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")     }      return response.data   } catch {     throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")   } }) <\/code><\/pre>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u0432 mobx \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u0443\u043c\u043c\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 10 \u0441\u0442\u0440\u043e\u0447\u0435\u043a, \u043d\u0435 \u043c\u043e\u0433\u0443 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u043e\u043c. Actions \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e toolkit \u0432\u0441\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441.<\/p>\n
\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c chatGPT \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 PostList \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Mobx \u0438 Redux-Toolkit.<\/p>\n
\/* \u041a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Mobx *\/  import React, { useEffect } from \"react\"; import { observer } from \"mobx-react-lite\"; import { postListStore } from \"..\/stores\/postListStore\"; import { IPromiseBasedObservableState } from \"mobx-utils\";  const PostListMobX: React.FC = observer(() => {   useEffect(() => {     postListStore.fetchCoursesData(10); \/\/ \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   }, []);    const { state } = postListStore.posts ?? {};    switch (state) {     case \"pending\":       return <div>Loading...<\/div>;     case \"rejected\":       return <div>Error: Failed to fetch posts<\/div>;     case \"fulfilled\":       return (         <div>           {postListStore.posts?.value.map((post) => (             <div key={post.id}>               <h2>{post.title}<\/h2>               <p>{post.description}<\/p>               {\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u043e\u0441\u0442\u0430 *\/}             <\/div>           ))}         <\/div>       );     default:       return null;   } });  export default PostListMobX; <\/code><\/pre>\n
\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441 \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f Mobx \u0443 GPT \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438.<\/p>\n
\/* \u041a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Redux-toolkit *\/  import React, { useEffect } from \"react\"; import { useDispatch, useSelector } from \"react-redux\"; import { RootState } from \"..\/store\"; import { fetchPostListAsync } from \"..\/postListSlice\";  const PostListRedux: React.FC = () => {   const dispatch = useDispatch();   const { posts, loading, error } = useSelector((state: RootState) => state.postList);    useEffect(() => {     dispatch(fetchPostListAsync(10)); \/\/ \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   }, [dispatch]);    if (loading) return <div>Loading...<\/div>;   if (error) return <div>Error: {error}<\/div>;   if (!posts) return null;    return (     <div>       {posts.map((post) => (         <div key={post.id}>           <h2>{post.title}<\/h2>           <p>{post.description}<\/p>           {\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u043e\u0441\u0442\u0430 *\/}         <\/div>       ))}     <\/div>   ); };  export default PostListRedux;<\/code><\/pre>\n
\u041e\u043f\u044f\u0442\u044c \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Redux-Toolkit \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435.<\/p>\n
\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0441\u0430\u043c\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 Toolkit \u0432\u0435\u0440\u0441\u0438\u0438 \u0441 Mobx, \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u042f \u0434\u0443\u043c\u0430\u044e, \u044d\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043b\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 2020 \u0433\u043e\u0434\u0443 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043d\u043e \u0432 2024 \u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0442. \u0414\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u044e \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u043e\u0431\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0438\u0441\u0430\u0442\u044c «\u0442\u043e\u043d\u0443» \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/809075\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figure>\n
\u041d\u0430 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043d\u0435\u0434\u0435\u043b\u0435 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u043f\u043e\u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u043b \u0432 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u043f\u043e Frontend, \u0433\u0434\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0447\u0438\u043a\u043e\u0432, \u0440\u0430\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a \u0443\u0434\u0430\u0447\u043d\u043e \u0435\u0433\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0435\u0440\u0435\u0435\u0445\u0430\u043b\u0430 \u0441 Redux \u043d\u0430 Mobx. \u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u043d \u043d\u0430\u0437\u0432\u0430\u043b \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 \u0438 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0440\u0430\u0437\u0430.<\/p>\n
\u042f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u043a\u043b\u0430\u0434\u044b, \u0433\u0434\u0435 \u0432\u0441\u0435 \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e Mobx \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c Redux. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0438 \u0442\u0430\u043a, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0434\u0435\u0442 Redux, \u0430 \u043d\u0435 Redux-Toolkit, \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e. \u041f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0438 Mobx \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0440\u043e\u0448 \u043a\u0430\u043a \u043e \u043d\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u044f\u0442.<\/p>\n
\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0430\u0434\u0435\u043f\u0442\u043e\u0432 Mobx \u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a<\/p>\n
\n
\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Redux \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u043d\u0443 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e. \u041d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c action-\u044b \u0438 selectors-\u044b.<\/p>\n<\/blockquote>\n
\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0430\u043c\u0443\u044e \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c.<\/p>\n
import { makeAutoObservable } from \"mobx\"; import { IPromiseBasedObservable, fromPromise } from \"mobx-utils\";  \/* \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f *\/ const PostListSchema = z.object({   id: z.number(),   title: z.string(),   description: z.string(),   tag: z.string(),   tags: z.array(z.string()),   image: z.string(),   progress: z.number(),   progressTotal: z.number() })  type PostListModel = z.infer<typeof PostListSchema>  \/* \u0417\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 *\/ export const fetchPostList = async (limit: number) => {   try {     const response = await _api.get<PostListModel[]>(`api\/posts`)      if (!response.data) {       throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")     }      return response.data.data   } catch {     throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")   } }   \/* \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u0430 *\/ class PostListStore {     posts?: IPromiseBasedObservable<PostListModel[]>     counter: 0      constructor() {         makeAutoObservable(this)     }      incrementCounter = () => {       this.counter += 1     }      decrementCounter = () => {       this.counter -= 1     }      fetchCoursesData = (limit: number) => {         this.courses = fromPromise(fetchPostList(limit))     } }  export const postListStore = new PostListStore() <\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430 Redux-Toolkit. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0437\u044f\u0442\u043e\u0441\u0442\u0438 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043e\u0446\u0435\u043d\u043a\u0435 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c chatGPT \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0437\u0430 \u043d\u0430\u0441.<\/p>\n
import { createSlice, PayloadAction } from \"@reduxjs\/toolkit\"; import { AppThunk } from \".\/store\";  \/* \u0422\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044f *\/ interface PostListState {   posts: PostListModel[] | null;   loading: boolean;   error: string | null;   counter: number; }  const initialState: PostListState = {   posts: null,   loading: false,   error: null,   counter: 0, };  \/* \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043b\u0430\u0439\u0441\u0430 *\/ const postListSlice = createSlice({   name: \"postList\",   initialState,   reducers: {     incrementCounter(state) {       state.counter += 1;     },     decrementCounter(state) {       state.counter -= 1;     },   },   extraReducers: (builder) => {     builder       .addCase(fetchPostListAsync.pending, (state) => {         state.loading = true;         state.error = null;       })       .addCase(fetchPostListAsync.fulfilled, (state, action: PayloadAction<PostListState[]>) => {         state.loading = false;         state.posts = action.payload;       })       .addCase(fetchPostListAsync.rejected, (state, action) => {         state.loading = false;         state.error = action.error.message ?? \"\u041e\u0448\u0438\u0431\u043a\u0430\";       });   }, });  export const { incrementCounter, decrementCounter } = postListSlice.actions;  export default postListSlice.reducer;  \/* \u0417\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 *\/ export const fetchPostListAsync = createAsyncThunk(\"fetchPostList\", async () => {   try {     const response = await axios.get(\"\/api\/posts\")      if (!response.data) {       throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")     }      return response.data   } catch {     throw new Error(\"\u041e\u0448\u0438\u0431\u043a\u0430\")   } }) <\/code><\/pre>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0430, \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u0432 mobx \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u0443\u043c\u043c\u0435 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 10 \u0441\u0442\u0440\u043e\u0447\u0435\u043a, \u043d\u0435 \u043c\u043e\u0433\u0443 \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u043e\u043c. Actions \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e toolkit \u0432\u0441\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441.<\/p>\n
\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043c chatGPT \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 PostList \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Mobx \u0438 Redux-Toolkit.<\/p>\n
\/* \u041a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Mobx *\/  import React, { useEffect } from \"react\"; import { observer } from \"mobx-react-lite\"; import { postListStore } from \"..\/stores\/postListStore\"; import { IPromiseBasedObservableState } from \"mobx-utils\";  const PostListMobX: React.FC = observer(() => {   useEffect(() => {     postListStore.fetchCoursesData(10); \/\/ \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   }, []);    const { state } = postListStore.posts ?? {};    switch (state) {     case \"pending\":       return <div>Loading...<\/div>;     case \"rejected\":       return <div>Error: Failed to fetch posts<\/div>;     case \"fulfilled\":       return (         <div>           {postListStore.posts?.value.map((post) => (             <div key={post.id}>               <h2>{post.title}<\/h2>               <p>{post.description}<\/p>               {\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u043e\u0441\u0442\u0430 *\/}             <\/div>           ))}         <\/div>       );     default:       return null;   } });  export default PostListMobX; <\/code><\/pre>\n
\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0441 \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f Mobx \u0443 GPT \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0438.<\/p>\n
\/* \u041a\u043e\u0434 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Redux-toolkit *\/  import React, { useEffect } from \"react\"; import { useDispatch, useSelector } from \"react-redux\"; import { RootState } from \"..\/store\"; import { fetchPostListAsync } from \"..\/postListSlice\";  const PostListRedux: React.FC = () => {   const dispatch = useDispatch();   const { posts, loading, error } = useSelector((state: RootState) => state.postList);    useEffect(() => {     dispatch(fetchPostListAsync(10)); \/\/ \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u044b \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430   }, [dispatch]);    if (loading) return <div>Loading...<\/div>;   if (error) return <div>Error: {error}<\/div>;   if (!posts) return null;    return (     <div>       {posts.map((post) => (         <div key={post.id}>           <h2>{post.title}<\/h2>           <p>{post.description}<\/p>           {\/* \u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u043e\u0441\u0442\u0430 *\/}         <\/div>       ))}     <\/div>   ); };  export default PostListRedux;<\/code><\/pre>\n
\u041e\u043f\u044f\u0442\u044c \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0432 \u043f\u043b\u0430\u043d\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Redux-Toolkit \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435.<\/p>\n
\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u0441\u0430\u043c\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 Toolkit \u0432\u0435\u0440\u0441\u0438\u0438 \u0441 Mobx, \u043a\u0440\u0430\u0439\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u042f \u0434\u0443\u043c\u0430\u044e, \u044d\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043b\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 2020 \u0433\u043e\u0434\u0443 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u043d\u043e \u0432 2024 \u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0442. \u0414\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0441\u0434\u0435\u043b\u0430\u044e \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u043e\u0431\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u0438\u0441\u0430\u0442\u044c «\u0442\u043e\u043d\u0443» \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/809075\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-374173","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=374173"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/374173\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=374173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=374173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=374173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}