❗️해당 게시물은 코딩애플 React Redux 강의를 수강하고 작성하였습니다.
❗️해당 게시물은 생활코딩 Redux-toolkit 강의를 수강하고 작성하였습니다.

Redux를 React에서 사용하기에는 어려움이 있다. 이러한 어려운 점을 해결하기 위해서 React Redux가 등장하였다. 그리고 더 편리함을 위해서 Redux toolkit이 등장하였다.

내장 API

Redux

• createStore
• subscribe
• getState
• dispatch

React Redux

• connect
• useDispatch
• useSelector

Redux toolkit

• configureStore
• createSlice
• createAsyncThunk

Redux-toolkit

Redux-toolkit의 등장배경

기존 Redux

• 설정
• 미들웨어 설치
• 반복되는 코드
• 불변성 유지의 어려움

props 없이 state를 공유할 수 있게 도와주는 라이브러리이다.

• Redux store 안에 모든걸 넣지 말기
• 컴포넌트간 공유가 필요없으면 그냥 useState 사용

⬇ Redux install

npm install @reduxjs/toolkit react-redux

⚙️ Redux setting

1.

store.js 파일 생성
store.js

import { configureStore } from "@reduxjs/toolkit"

export default configureStore({
	reducer : {  }
})

2.

<Provider store={import해온 거}> 이 걸로 <App />을 감싸면 된다.
index.js

import { Provider } from "react-redux";
import store from '../redux/store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <Provider store={store}>
    	<App /> //store.js에 있던 state 전부 사용가능
    </Provider>
);

📂Redux store에 state 보관하는 방법

state 하나를 slice라고 부른다.
store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({ //useState 역할
	name : 'user',
  	initialState : 'kim' //실제 값
})

export default configureStore({
	reducer : {
		user : user.reducer //user 등록
	}
})

1. createSlice 상단에서 import를 해준다.

2. {name : 'state이름',initialState : 'state'} 해주면 state 하나가 생성이 된다.
   → createSlice()는 useState()와 용도가 비슷하다고 보면 된다.

3. state 등록은 configureStore() 안에 하면 된다.

4. { 작명 : createSlice변수명.reducer } 하면 된다.
   → 여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능하다.

configureStore

Reducer에서 반환된 새로운 state를 Store라는 개체로 정리해 관리하는 곳이다.

store의 state 변경하는 방법

• state 수정해주는 함수 만들기
• 원할 때 그 함수 실행해달라고 store.js 에 요청

1. state 변경해주는 함수(changeName) 만들기 - store.js안에 미리 만들기
   store.js

let user = createSlice({
	name : 'user',
    initalState : 'kim',
    reducers : {
			changeName(state){
			return 'john '+ state
		}
    }
})

2. export
   → 변경함수를 export 해야한다. 하지만...

store.js

let user = createSlice({
	name : 'user',
  	intialState : 'kim',
  	reducers : {
    	export changeName(state){
        	return 'john '+ state
        }
    }
})

위 코드와 같이 변경함수 앞에 export를 해주게 되면 작동하지 않는다. export는 createSlice() 함수 밖에서 사용해주어야 한다.

아래와 같이 작성해주어야 한다.

export let { changeName } = user.actions //함수명을 적어주면 된다. (destructuring)

createSlice()함수 밖에서 작성한 코드 변경함수가 있는 createSlice이름.action라고 적으면 된다.

3. dispatch(state변경함수())
   component 들이 state 수정이 필요하다면 store.js 한테 변경함수 좀 실행해달라고 부탁하는 것이다.
   즉, dispatch는 store.js 한테 실행 부탁 메시지를 보내주는 것이다.

Cart.jsx

import {useDispathch, useSelctor}
import { changename } from "../redux/store.js"

const Cart = ()=>{
	let a = useSelector((state) => state); //redux store 가져오기
  	let dispatch = useDispatch() //dispatch는 store.js로 요청을 보내주는 함수이다.
 
    return(
    	<>
        	<button onClick = {()=>{
				dispatch(changeName())  //dispatch(state변경함수()) 이렇게 사용해주면 된다.
          		//그냥 state 변경함수()를 가져다 사용하지 말고 꼭 import 해주어야 한다.	
          }>
				store.js한테 실행 부탁 메시지 보내는 버튼
        	</button>
        </>
    )

}

state가 array/object

state가 array/object경우 return 없이 직접 수정할 수 있다.
❗️return을 입력할 경우 에러가 발생한다.
→ 수정이 편리하기 때문에 문자 하나만 필요해도 {}안에 담기도 한다.
store.js

let user = createSlice({
    name : 'user',
    initialState : {name : 'kim', age:20},
    reducers : {
        changeName(state){ //기존 state를 뜻한다.
            state.name = "park"
        },
        increase(state, action){
            state.age += action.payload //action.payload 화물보낸거 출력문법
        },
    }
})

• 파라미터 뚫어 놓으면 비슷한 함수 여러개 필요없다.
• 파라미터 작명을 할때 보통 action이라고 많이 한다.
  왜? action에는 화물 뿐만 아니라 액션에 대한 여러가지 정보들이 들어 있기 때문이다.

결론 : state 변경함수를 action이라고 한다.

store.js 안에 있는 let user 코드 길면 import export 사용하면 된다.