리덕스에서 가장 중요한 점, 기존의 state를 변경해서는 안되는 이유!

 

리덕스 스토어를 리액트 앱에 제공하기 위해서 주로 index.js 파일로 간다. 거기서 전체 앱을 렌더한다. (컴포넌트 트리의 가장 위쪽)

거기서 root 컴포넌트를 렌더한다. 

 

 

컴포넌트의 대부분이 스토어에 접근해야 한다면, 가장 높은 레벨에서 <Provider>를 제공해야한다. 

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import "./index.css";
import App from "./App";
import store from "./store/index";

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

 

👇 App에 있는 모든 컴포넌트는 store에 탭 될 수 있다.

➥ store 밖으로 데이터를 가져올 수 있다. subscription을 설정할 수 있다. 액션도 dispatch 할 수 있다. 

 

 

---

import { useSelector } from "react-redux";

{store} 보다 {useSelector}가 더 편하다! 그 이유는 {useSelector}는 자동으로 상태의 일부를 선택하게 해주기 때문이다. 

 

 

{useSelector}로 스토어가 관리하는 데이터에 접근할 수 있다. 

useSelector()는 함수를 보내야 하는데, 그 함수는 리덕스가 관리하는 상태를 받는다. 그리고 상태의 일부를 리턴한다. (여기서는 state.counter)

 

useSelector()를 쓰면 좋은게, 리액트 리덕스가 자동으로 서브스크립션을 설정한다는 것! 👉 그래서 리덕스 스토어에서 데이터가 바뀔 때마다 컴포넌트가 업데이트 되고 자동으로 가장 최신의 카운터를 받는다. 

 

리덕스에서 가장 중요한것!!

절대 기존의 state를 변경해서는 안된다!!

대신 새로운 state 객체를 반환해서 항상 재정의해야한다. 

 

예측 불가능한 동작이 발생할 수 있고, 프로그램을 디버깅하는 것도 어려워 질 수 있다. 

버그가 발생하지 않더라도 state가 동기화 되지 않는 더 큰 애플리케이션에서 예기치 않은 side effect가 생길 수 있고, 값자기 UI가 더이상 state를 정확히 반영하지 않을 수도 있다. 

const firstReducer = (state = initialState, action) => {
  if (action.type === "increment") {
  state.counter++;
    return {
      counter: state.counter,
      showCounter: state.showCounter,
    };
  }

이렇게 쓰면 안된다!!

객체와 배열이 자바스크립트에서 참조값이기 때문에 여전히 기존의 state를 변형시킨다. 

 

 

⭐️⭐️따라서 중첩된 객체를 복사하거나 삭제할 때는 항상 새로운 객체나 배열을 반환하기!⭐️⭐️

 

const firstReducer = (state = initialState, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
      showCounter: state.showCounter,
    };
  }

이게 맞다

 

특히 중첩된 객체와 배열을 가진 state의 경우 기존의 state를 실수로 변형시킬 수 있다. 유의하기!

데이터를 업데이트해야 할 때마다 기존 객체로 가서 객체 속성이 조작되지 않도록 해야한다!

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓