TIL_38_221222

38일 차 회고

내일이 프로젝트

프로젝트 하루전! 할 수 있을꺼야!!!!!!!!!!

리덕스툴킷

• 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것 (코드를 더 적게)
• Action Value, Action Creator, Reducer 가 하나로 합쳐졌다.

리덕스 툴킷 설치

yarn add react-redux @reduxjs/toolkit

리덕스 툴킷 사용법

1. createSlice 를 import 한다.
2. API를 통해 createSlice 만든다.
   1. name : 모듈의 이름
   2. initialState : 모듈의 초기값 상태
   3. reducer : 모듈 reducer 로직

import {createSlice} from '@reduxjs/toolkit'

const initialState = {
	number: 0
}

const counterSlice = creacteSlice({
	name:"counter" 
	initialState,
	reducers: {}
})

툴킷의 리듀서

• 리듀서 객체 안에 만들어지는 함수가 리듀서의 로직이 되면서 Action Creator가 동시에 된다.
• Action Value 까지 함수의 이름을 따서 자동으로 만들어짐.

const counterSlice = createSlice({
	name:'counter',
	initialState,
	reducers: {
		addNumber: (state, action)=>{
			state.number = state.number + action.playload
		}

		minusNumber: (state, action)=>{
			state.number = state.number - action.payload
		}
	}
})

툴킷 export

• 일반 리덕스에서 export를 통해 각각의 Action Creator를 내보낸것을 한번에 내보낼수 있다.

// 액션크리에이터 를 컴포넌트에서 사용하기 위해-> export 
export const {addNumber, minusNumber} = counterSlice.actions.

//reducer는 configStore에 등록하기 위해 export default
export default counterSlice.reducer

config/configStore -store 작성

1. configureStore import
2. modlues 폴더에서 리듀서 import
3. configureStore 작성
   1. 추가할때마다 reducer 안에 추가 해 준다.
4. export default store

import {configureStore} from '@reducxjs/toolkit'

import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

const store = configureStore({
	reducer: {counter:counter, todos:todos}
})

export default store

index.js - store

• Provider

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

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

App.jsx

• 저장한 툴킷 모듈 조회

import React from 'react'
import {useSelector} from 'react-redux'

const App = ()=>{
	// store 모듈 조회
	//1.
	const todos = useSelector((state)=>state.todos);
	//2.
	const counter = useSelector((state)=>state.counter)

	return<div>App</div>
}

export default App;