코드를 줄이기 위한 React redux 모범 사례

리덕스란?

Redux는 애플리케이션 상태를 관리하기 위한 JavaScript 라이브러리입니다. 상태가 변경되더라도 일관되게 동작하는 애플리케이션을 작성할 수 있게 해주는 예측 가능한 상태 컨테이너입니다.

우리 대부분은 여러 프로젝트에서 redux를 사용하고 있으며 여러 프로젝트에서도 사용했습니다. 사용하기 쉽고, 이해하기 쉽습니다. 한 가지 마음에 들지 않는 것은 많은 상용구 코드입니다. 간단한 예를 들어 이해해 봅시다.

I'm not going to cover redux setup details here

단계:
npm을 사용하여 react-redux 및 redux 설치

// Store.ts
import { combineReducers, createStore } from "redux";

// Reducer file
const counterReducer = (state = 0, { type, payload }) => {
  switch (type) {
    case "INCREMENT":
      return state + payload;
    case "DECREMENT":
      return state + payload;
    default:
      return state;
  }
};

// Action creator file
export const increment = (payload) => ({ type: "INCREMENT", payload });
export const decrement = (payload) => ({ type: "DECREMENT", payload });

// Store entrypoint file
const reducers = () =>
  combineReducers({
    counter: counterReducer,
  });

const store = createStore(reducers());

export default store;

참고: 모든 섹션을 다른 파일로 이동할 수 있습니다. 나는 그것을 간단하게 유지하려고 노력하고 있습니다.

App.ts

export default function App() {
  const state = useSelector((state: any) => state);
  const dispatch = useDispatch();
  return (
    <div>
      <h1>Count: {state.counter}</h1>
      <button onClick={() => dispatch(increment(1))}>Increment</button>
      <button onClick={() => dispatch(decrement(-1))}>Decrement</button>
    </div>
  );
}

index.ts

<Provider store={store}>
  <App />
</Provider>

이 접근 방식의 문제점이 무엇인지 궁금할 수 있습니다. 이 접근 방식에는 문제가 없습니다. 이 예에서는 동작이 2개뿐이며 간단해 보이지만 실제로는 많은 동작이 있습니다. 모두를 위한 별도의 액션 생성기 함수를 만들어야 합니다. 모든 함수가 액션 이름을 제외하고 거의 동일한 코드를 가지고 있기 때문에 마음에 들지 않습니다. 모든 액션 생성자를 자동으로 생성할 수 있다면 좋을 것입니다.

액션 생성자를 어떻게 자동으로 생성할 수 있습니까?

가장 먼저 해야 할 일은 리듀서의 구조를 업데이트하는 것입니다. 스위치 케이스를 사용하는 대신 객체를 사용해야 합니다.

객체는 감속기를 관리하는 더 좋은 방법이며 더 빠르고 읽기 쉽습니다. 나는 스위치 케이스를 좋아하지 않고 객체를 선호합니다.


Switch는 O(n)의 시간 복잡도를 가질 수 있습니다. 여기서 n은 경우의 수입니다. 객체의 시간 복잡도는 O(1)입니다.

Reducer file

const counterReducerMap = {
  increment: (state, { payload }) => state + payload,
  decrement: (state, { payload }) => state + payload,
};

const counterReducer = (state = 0, action) => {
  const handler = counterReducerMap[action.type];
  return handler ? handler(state, action) : state;
};

일반적인 액션 생성자 함수를 만들어 봅시다

const createAction = <T>(reducers): T => {
  return Object.keys(reducers).reduce((acc, type) => {
    acc[type] = (payload) => ({
      type,
      payload,
    });
    return acc;
  }, {} as T);
};

export const { increment, decrement } = createAction(counterReducerMap);

You can remove generic type if you are using javascript.

참고: 여기서 주목해야 할 가져오기 항목은 리듀서 맵 키가 액션 생성기 기능이라는 것입니다. 감속기 기능이 아닙니다.

이 접근 방식을 따르면 많은 상용구 코드를 줄일 수 있습니다. 이 접근 방식은 프로덕션 번들 크기도 줄입니다.


Typescript 개발자를 위한 보너스

type ActionCreator<A> = {
  [key in keyof A]: <T>(payload: T) => {
    type: key;
    payload: T;
  };
};

type Action = ActionCreator<typeof counterReducerMap>;
export const { increment, decrement } = createAction<Action>(counterReducerMap);

실제 예: 여기

읽어주셔서 감사합니다 😊

질문이나 추가 사항이 있습니까? 댓글을 남겨주세요.




당신이하지 않은 경우 읽어야합니다
















자세한 내용은 .


Github , , , Medium , Stackblitz에서 나를 잡아라.