[Redux toolkit] object 자료 state변경하기

redux toolkit에서 object자료 데이터 변경하는 부분에 대해 학습하였다. redux toolkit은 기존 리덕스를 좀 더 사용하기 편하게 만들었다곤 하지만 생소한 부분이 많았다.

store.js

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20}
}) 

예시로 리덕스의 store.js파일 내부 user의 name을 바꾸고싶다면 어떻게 해야할까. 처음으로 reducers를 만들고 함수명을 만들어준다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
  changeName(state) {
      state.name = "park";
    }
  }
}) 

• 매개변수 state는 user의 내용이 들어온다.

그리고 원하는 값을 불러와 바꾸고싶은 값으로 변경 해준다. 일반 js와는 다르게 redux toolkit에서는 object자료형은 바로 변경이 가능하다. 그래서 redux toolkit에서는 state를 만들때 문자나 숫자가 하나가 필요하더라도 일부러 object나 array에 담는 경우가 많다고 한다.

다음으로 age에 값을 하나씩 더해주는 함수를 만들어 줬다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
  changeName(state) {
      state.name = "park";
    },
  plusage(state) {
      state.age += 1
    },
  }
}) 

• age를 불러와서 하나씩 올려주는 로직을 만들었다.

그런데 만약 +1이 아니라 원하는 값 만큼 올려줄 수 있게 범용성을 넓히고 싶으면 두번째 매개변수로 action을 넣어주면 된다.

let user = createSlice({
  name : 'user',
  initialState : {name : 'kim', age : 20},
  reducers : {
  changeName(state) {
      state.name = "park";
    },
  plusage(state, aciton) {
      state.age += action.payload; // .payload를 꼭 넣어줘야 한다.
    },
  }
}) 

App.js

function App() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();

  return (
    <div>
      이름 : {state.user.name}
      나이 : {state.user.age}
      <button
        onClick={() => {
          dispatch(changeName());
        }}
      >
        이름 변경 버튼
      </button>
		<button
        onClick={() => {
          dispatch(plusage(100));
        }}
      >
        나이 변경 버튼
      </button>
	</div>
	)
}

이름 변경 버튼을 누르면 'park'이 나오고 나이 변경 버튼을 누르면 20에 100이 더해진 120이 출력 된다.