05/15-1[toolkit]

https://redux-toolkit.js.org/introduction/getting-started

https://react-redux.js.org/tutorials/quick-start

설치 : npm install @reduxjs/toolkit react-redux [설치할 것은 2개이며, 확인은 package.json에서 확인가능]

예시작성

import {createSlice} from "@reduxjs/toolkit";

export let counterSlice=createSlice(
{name:"counter",initialState:{value:0},
reducers:{
increment:(state)=>{state.value+=1;},},});
export let {increment}=counterSlice.actions;
export defalut counterSlice.reducer;

increment를 export 하는 부분은 action 생성함수를 slice를 통해서 내보내고, default 부분은 reducer 부분을 내보낸다.

counterSlice 부분은 초기값과 생성함수,reducer를 통으로 보내주는 역할이다

굵게 표시한 s도 생각보다 중요하다. 1개만 있어도 reducer와 action이 아닌 reducers와 actions로 써야 인식이 된다.

작성한 redux들을 묶어서 store로 보내주는 구간

import {configureStore} from "@reduxjs/toolkit"; : 묶어주는 configureStore 컴포넌트를 쓰기 위한 import

import counterSlice from ".slices/counterSlice"; : 위에서 작성한 counterslice부분을 불러온다

export default configureStore({reducer:{counter:counterSlice}}); : reducer에 지정해준 이름과 그 윗 부분을 불러와서 사용하게 해준다

jsx에서 사용 시 : 앞에서 배운대로 useSelector와 useDispatch 쓰는것은 동일하다.

let counter=useSelector((state)=>state.counter.value); : 조금 다른 점은 state에서 묶는 구간의 정해준 이름으로 들고 와서 쓰고 싶은 부분만 걸러낼 수 있다. 만약 모르겠다면 state만 입력해서 console.log로 확인하는 방법이 있다

dispatch(increment()) : 이전에 배운대로 똑같이 쓰면 된다

배열의 경우도 전의 경우와 비슷하다. 다른 점은 push를 사용한다.

let newMemo={...action.payload,id:id};
id++;
net newMemoList=state.concat(newMemo);
return newMemoList;

였다면

let newMemo={...action.payload,id:id}
id++;
state.push(newMemo);

로 줄일 수 있다

추가의 경우 concat 을 대신해서 push, 제거의 경우 filter를 대신해서 splice를 쓴다. splice의 경우 인덱스 번호로 접근하기 때문에 jsx에서 index도 불러와서 써줘야 한다.

jsx에서 [A,B]=useState() 입력한 값을 보관할 공간을 만들고 onchange={()=>{(e)=>B(e.target.value)}로 값을 A에 보관한 후 reducer중 action 값을 사용하는 함수인 경우 dispatch(action값을 사용하는 함수(A)) 로 값을 넘겨준다. 중요한 부분은 e.target.value로 받는 값들은 모두 문자열이기 때문에 +의 경우 숫자+숫자는 사칙연산이지만 숫자+문자는 숫자 뒤에 문자를 붙이는 형식이므로 e.target.value를 감싸서 parseInt를 붙여줘야 한다.