? Redux ?? ?? ?

Redux? ??????
Redux? ?????? ??? ??? ???? JS ?? ??? ?? ???????. ?? ????? ?????? ??? ????? ?? ??? ??? ?? ??? ? ?? ??? ? ????.

? Redux???
???? ????? ???? ?? ??? ???? ?? ?? ???? ???? ???. ?? ????? ??? ??? ???? ????. ?? ?????. ?? ?? ?? ?? ??? ????? ?? ??? ??? ???? ??? ?? ??? ???? ????. ??? ?? ??? ???? ?? redux? ??? ?????. ??? ?? ?? ??? ???? ???? ??? ?? ??? ??? ?? ???? ???? ???. Redux? ??? ??? ??? ???? ?? ??? ?? ??, ? ?? ???, ??? ???? ?????.

?? Redux ????:

??: ??? ?? ???? ?????. ????? ??? ??? ????? ?????. (???)
????: ??? ?????? ?? ???? ??? ??? ? ???? ?????. (??? ?? ?)
???: ?? ??? ??? ?? ?? ? ??? ???? ?? ?????. (??? ??? ? ????? ??)

??: npm i @reduxjs/toolkit React-redux

Redux ?? ??:

???? ???:
????? ?? ??? ?? Redux ??? ?? ? ??? ?????. ?? ??? ???? ?? ????? ???? ???? ?? ??? ??? ? ????.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const postSlice = createSlice({
 name: "posts",
 initialState: [],
 reducers: {
   addPost: {
     reducer: (state, action) => {
       state.push(action.payload);
     },
     prepare: (title, content) => ({
       payload: { id: nanoid(), title, content },
     }),
   },
   deletePost: (state, action) => {
     return state.filter((post) => post.id != action.payload);
   },
 },
});

export const { addPost, deletePost } = postSlice.actions;

export default postSlice.reducer;

??? ??:

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
   reducer: {
       posts: postReducer
   },
 });

??? ??:

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

????? ??:

const PostList = ({ onEdit }) => {
 const posts = useSelector((state) => state.posts);
 const dispatch = useDispatch();

 return (
   <div className="w-full grid grid-cols-1 gap-6 mt-12">
     {posts.map((post) => (
       <div key={post.id}></div>
     ))}
   </div>
 );
};

Redux ???? ??: Redux DevTools

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

Redux? ??? ??(Redux Thunk):

Redux??? ????? ?? ?? ????? ???? ??? Redux??? ??? ??(?: API ??)? ????? ???? ?????. ??? ??? ???? ?? ???? ????? Redux Thunk, createAsyncThunk? ??? Redux Toolkit(RTK) ? Redux Saga???.

??:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Fetch all posts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
});

// Initial State
const initialState = {
  posts: [],
  post: null,
  loading: false,
  error: null,
};

// Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // Fetch all posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })

      },
});

export default postsSlice.reducer;

?? ??:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts, createPost, updatePost, deletePost } from './postsSlice';

const Posts = () => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) =>state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const handleCreate = () => {
    dispatch(createPost({ title: 'New Post', body: 'This is a new post' }));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <button onClick={handleCreate}>Create Post</button>
     </div>
  );
};

export default Posts;

????
Redux? ????? ??? ??? ???? ??, ?? ?? ?? ??? ?? ??? ?????. ????? ???? ?? ????? ?? ??? ? ????.

const blogPostMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === 'posts/publishPost') {
    const contentLength = action.payload.content.length;

    if (contentLength < 50) {
      console.warn('Post content is too short. Must be at least 50 characters.');
      return;
    }
    console.log('Publishing post:', action.payload.title);
  }
  return next(action);
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(blogPostMiddleware),
});

???
???? ?? ?? ??? ????? ? ??? ???.

???? const selectCount = (state) => ??.???.?;

?? ??
??? ?? ??? ??? ????? ?????.

import { createSlice, nanoid } from "@reduxjs/toolkit";

const postSlice = createSlice({
 name: "posts",
 initialState: [],
 reducers: {
   addPost: {
     reducer: (state, action) => {
       state.push(action.payload);
     },
     prepare: (title, content) => ({
       payload: { id: nanoid(), title, content },
     }),
   },
   deletePost: (state, action) => {
     return state.filter((post) => post.id != action.payload);
   },
 },
});

export const { addPost, deletePost } = postSlice.actions;

export default postSlice.reducer;

RTK ??(??? ??? ????)

RTK ??? ??? ????, ?? ? ???? ??????. RTK ??? ??? ???? ???? ???? ?? ????? ???? ??? ??????.

RTK ?? ??

import { configureStore } from "@reduxjs/toolkit";
import postReducer from "../features/posts/postSlice";

export const store = configureStore({
   reducer: {
       posts: postReducer
   },
 });

??????? ??

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

createRoot(document.getElementById("root")).render(
 <StrictMode>
   <Provider store={store}>
     <App />
   </Provider>
 </StrictMode>
);

Immer? ??? ?? ????

Immer? ???? ????? ????? ??? ? ??? ????? ??? ?? "??"?? ??? ??? ? ????.

const PostList = ({ onEdit }) => {
 const posts = useSelector((state) => state.posts);
 const dispatch = useDispatch();

 return (
   <div className="w-full grid grid-cols-1 gap-6 mt-12">
     {posts.map((post) => (
       <div key={post.id}></div>
     ))}
   </div>
 );
};

???? ? ??

Mutate: ???? ?? ?????. ?? ?? ??? ??? ?????.
??: ???? ?? ???? ?? ?? ??? ??? ? ???? ??? ?? ???? ??? ?????.

Immer ?? ??
Immer? ???? ???? ??? ???(?, ?? ????) ??? ???? ? ??? ??? ???? ?????? ?? ??? ??? ? ??? ?????. ?? JavaScript?? ?? ??? ??? ??? ? ???? ??? ??? ? ?????.
?: Immer ??(??):

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

Immer(???) ??:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Fetch all posts
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
});

// Initial State
const initialState = {
  posts: [],
  post: null,
  loading: false,
  error: null,
};

// Slice
const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      // Fetch all posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      })

      },
});

export default postsSlice.reducer;

??? ?? ??? ???? ???? ????? ??? ?? ??? Redux(?? ?? ?? ??) ??? ? ?????. Immer? ???? ?? ?????.

Redux ??:

??? ???? ? Redux ??? ???? ?? Redux Persist? ??? ? ????. ??? ?? Redux ??? ?? ???? ?? ???? ???? ?? ?? ??? ? ?? ?????.

??:
npm ?? redux-persist

??:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts, createPost, updatePost, deletePost } from './postsSlice';

const Posts = () => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) =>state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  const handleCreate = () => {
    dispatch(createPost({ title: 'New Post', body: 'This is a new post' }));
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <button onClick={handleCreate}>Create Post</button>
     </div>
  );
};

export default Posts;

Persisit Gate? ??:

const blogPostMiddleware = (storeAPI) => (next) => (action) => {
  if (action.type === 'posts/publishPost') {
    const contentLength = action.payload.content.length;

    if (contentLength < 50) {
      console.warn('Post content is too short. Must be at least 50 characters.');
      return;
    }
    console.log('Publishing post:', action.payload.title);
  }
  return next(action);
};

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(blogPostMiddleware),
});

??? ?? ??

localStorage ?? sessionStorage ??:
?? ??? ?? ???? ?????(????? ??? ???).

initialState: {
  items: [],
  status: 'idle',
  error: null,
},

.addCase(fetchData.rejected, (state, action) => {
  state.status = 'failed';
  state.error = action.error.message;
});

??? ???:
??? ?? ??? ?????.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
    getPostById: builder.query({
      query: (id) => `/posts/${id}`,
    }),
    createPost: builder.mutation({
      query: (newPost) => ({
        url: '/posts',
        method: 'POST',
        body: newPost,
      }),
    }),
    updatePost: builder.mutation({
      query: ({ id, ...updatedPost }) => ({
        url: `/posts/${id}`,
        method: 'PUT',
        body: updatedPost,
      }),
    }),
    deletePost: builder.mutation({
      query: (id) => ({
        url: `/posts/${id}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const {
  useGetPostsQuery,
  useGetPostByIdQuery,
  useCreatePostMutation,
  useUpdatePostMutation,
  useDeletePostMutation,
} = api;
export default api;

CRUD ??? ?? React, Redux ? Ant ???? ???? ??? ??? ????? ??????. ???? ? ????.
???? ?? - Redux ??? ?

? Redux Toolkit? ????? React ?? ??????!

? ??? React ???? ?? ???? Redux ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!