React 개발자를 위한 포괄적인 Redux 툴킷 노트

? 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!