Redux💡

🧡redux의 구조

✨Action Type 정의

• Reducer에서 사용 할 Type들을 미리 변수로 정의한다.

// src/modules/user.js

  //const 타입명 = '사용 될 reducer/타입명'

  export const ADD_USER = 'user/ADD_USER'
  export const DELETE_USER = 'user/DELETE_USER'

• 사용되는 타입을 미리 정의해두어 협업시에 가독성을 높임
• 사용되는 reducer를 함께 명시하여 여러개의 리듀서를 함께 사용 시, 타입명의 중복에 따른 오류 예방
• export 하여 다른 파일에서도 사용가능한 타입을 빠르게 찾고, 편하게 사용할 수 있도록함
• 혹시나 있을 오타 방지

✨Action 생성함수

action객체 : {type: ~~ , payload: ~~}와 같은 객체를 redux에서는 action객체라고 함

dispatch : action객체를 dispatch()함수를 통해 reducer로 보내는 행위를 dispatch라고 함

action생성함수 : dispatch()에 전달 할 타입과 데이터를 return하는 함수

• 매번 dispatch({type: ~~, payload: ~~})라고 코드에서 명명하기보단 action객체를 리턴하는 함수를 생성하여 해당 함수를 dispatch()에 전달 => dispatch(addUser(user))
• payload 에 인자로 받은 기타 데이터들을 담음

// src/modules/user.js

  export function addUser(user) {
    return {
      type: ADD_USER,
      payload: user,
    };
  }

  export function deleteUser(userId) {
    return {
      type: DELETE_USER,
      payload: { userId },
    };
  }

✨Reducer

• initialState에 기본값이 될 데이터를 담아서 state의 기본값으로 전달
• state의 값은 불변성을 유지해야함
  • 기본값으로 math.random(), new Date() 등.. 의 아이템 사용금지
  • 위와 같이 값이 변하는 데이터는 액션 생성 시 처리
• 리액트는 메모리 값의 변화로 state값의 변화를 알아차린다.
  • push등 메모리값의 변화가 없는 방식으로 데이터 변경 금지
  • concat 혹은 ...(spread) 사용

// src/modules/user.js

  const initialState = [
    {
      id: 1,
      name: "Leanne Graham",
      email: "Sincere@april.biz",
    },
    {
      id: 2,
      name: "Ervin Howell",
      email: "Shanna@melissa.tv",
    },
    {
      id: 3,
      name: "Clementine Bauch",
      email: "Nathan@yesenia.net",
    }
  ]

  export default function user(state = initialState, action) {
    switch (action.type) {
      case ADD_USER:
        return [...state, action.payload];

      case DELETE_USER:
        return state.filter((item) => item.id !== action.payload.userId);
      default:
        return state;
    }
  }

✨Store (기본)

• store란 앞에서 작성한 리듀서와 상태를 담아놓은 것
• 하나의 앱에는 하나의 store만 존재하도록 하는것이 원칙
• store에서 사용 할 reducer를 정의 후 Provider로 컴포넌트를 감싸 어떤 컴포넌트에서든 리듀서와 상태를 가져올 수 있도록 함

// src/store/index.js

  import { legacy_createStore as createStore } from "redux";
  import user from "../modules/user";

  const store = createStore(user);

  export default store;

현재 createStore는 deprecate되어 redux-toolkit의 configureStore로 사용되길 권장되지만 순수 redux만 사용 시 위와 같이 legacy_createStore를 받아 사용 할 수 있음

• 위와 같이 store 작성 후 Provider로 앱 전체를 감싼 뒤 store를 전달

import { Provider } from "react-redux";
import store from "./store";
import User from "./components/User";

function App() {
  return (
    <Provider store={store}>
      <User />
    </Provider>
  );
}

export default App;

✨Store (Reducer가 여러개일 때)

• 아래와 같은 형태로 combineReducers() 내에 사용 할 Reducer를 모두 정의 한 뒤, 해당 변수를 store에 전달한다

const rootReducer = combineReducers({
  키: 리듀서,
  키: 리듀서,
});

// src/store/index.js

import { combineReducers,legacy_createStore as createStore } from "redux";
import counter from "../modules/counter";
import user from "../modules/user";

const rootReducer = combineReducers({
  counter,
  user,
});

const store = createStore(rootReducer);

export default store;

• 똑같이 Provider로 App전체를 감싸주어 store를 전달해주면 끝!

🧡Redux Hooks

• 위의 Redux구조를 완성하고 나면 기본 세팅은 완료
• 이제 Reducer에 정의 된 데이터를 사용해보자

✨useSelector()

• redux 로 관리 중인 상태(state)를 가져오기 위한 Hook
• useSelector()는 reducer에 정의 된 state값을 받아옴
• store에 여러개의 reducer를 정의 한 경우 combineReducers에서 정의한 해당 reducer의 key값으로 원하는 reducer의 state를 불러온다

//src/components/User

  import { useSelector } from "react-redux";

  function User() {
    // reducer가 한개일 때 (기본)
    const users = useSelector((state) => state);
    
    // reducer가 여러개일 때
    const users = useSelector((state) => state.user);
    const number = useSelector((state) => state.counter);
    
    return ...
  }

• dispatch를 통해 state의 상태를 변경하면 useSelector로 받아온 state의 값도 자동으로 갱신 됨

✨useDispatch()

• dispatch 함수를 실행할 수 있도록 해주는 Hook
• 만들어진 액션 객체를 Reducer 로 전달하는 과정을 수행해주는 Hook
• action객체를 직접 전달해도 되지만 위에서 작성한 action생성함수 를 전달해주는 방식이 주로 사용 됨

import { useDispatch, useSelector } from "react-redux";
import { addUser, deleteUser } from "../modules/user";

function User() {
  const users = useSelector((state) => state.user);
  const dispatch = useDispatch();

  const onAdd = (user) => {
    dispatch(addUser(user));
  };

  const onDelete = (userId) => {
    dispatch(deleteUser(userId));
  };
  
  return (
    <div>
      {users.map((user) => (
        <div key={user.id}>
          <p>{user.name}</p>
          <button onClick={() => onDelete(user.id)}>제거</button>
        </div>
      ))}
      <button onClick={() => {onAdd({ name: "john" })}}>추가</button>
    </div>
  );
}

export default User;

---

마치며🙌

Redux 별 거 없네!!!

...
라고 생각했었다.... 이때까지는.......🥲
딱 이만큼만 알면 안되는걸까요......

그래도 처음 리액트를 배울 땐 이 컴포넌트에서 저 컴포넌트로 데이터를 마구마구 주고받아야하는게 그렇게 골치가 아플 수 없었는데 이런 도구들을 사용할 줄 알게 되면서 한결 다루기가 수월해진 느낌이긴 하다..!!

배우는게 어렵긴 하지만 아는게 많아질수록 코드 다루기가 쉬워지는게 느껴지니... 열심히 해봐야겠죠..!!?

일단 주말을 쉬고 다음주에는 redux의 middleware와 toolkit도 정리해봐야지... 🥲 (그만하고싶어요...🫠)