노마드코더/React-Redux3 3. Redux Toolkit Redux-Toolkit : Redux를 더 간결하고 편리하게 사용할 수 있는 pakage -리덕스보다 더 짧은 코드로 짤 수 있음 -state를 mutate(변형)이 가능함. 단 리턴을 해야 함 ex) return store.push() = O>> npm install @reduxjs/toolkit //redux toolkit 설치 redux - ※createSlice : Redux-Toolkit에서 reducer를 생성하는 함수. -name : 이름 -initialState : 초기값 -reducers : 리듀서 생성import { createSlice } from "@reduxjs/toolkit";const countSlice = createSlice({ //슬라이스 생성 n.. 2024. 5. 14. 2. useDispatch dispatch : reducer에게 메세지(action)를 전달하는 함수 page - ※useDispatch : react-redux에서 디스패치를 사용할 수 있게 함import React from "react";import { useDispatch, useSelector } from "react-redux";function ReduxCount() { const count = useSelector((state) => state); const dispatch = useDispatch(); //디스패치 const addCount = (e) => { e.preventDefault(); dispatch({ type: "ADD" }); //카운터 증가 }; const minusCount .. 2024. 5. 12. 1. useSelector, Provider 리덕스 -자바스크립트의 state를 관리하는 라이브러리 -React, Angular, Vue.js 등 자바스크립트 어디에서는 사용 가능 -state를 mutate(변형)하지 않고 새로운 object를 리턴해야 한다 ex) store.push() = X [return [...state, {type : "ADD"}] = O>> npm install react-redux //리액트 리덕스 설치 redux - ※store : data가 저장되는 state ※createStore() : store를 생성하는 함수 ※reducer : data를 수정(modify)하는 함수 ※ action : reducer에게 명령을 내리는 매개변수 -type : 명령 이름 지정 .. 2024. 5. 12. 이전 1 다음
