본문 바로가기
728x90

개발일지/redux4

TypeScript-React에서 ReduxToolkit 사용해보기 React TypeScript에서 ReduxToolkit을 사용하기 위해 간단한 설정만 기록합니다. javaScript에서 ReduxToolkit 사용하는법은 아래 링크의 예제를 참고해보셔도 좋습니다. https://hanbbistory.tistory.com/53 AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; 위의 설정을 마치면 js에서 dispatch를 사용하는 것과 같이 사용할 수 있다. // Form.tsx import { useAppDispatch, useAppSelector } from "../hook/useRedux"; import { FormEvent } from "../ty.. 2023. 1. 18.
redux Mock server(json-server) 사용하기 / .with POST MAN React를 사용하면서 서버와 연결하기 전, Post Man을 통해 임시로 서버를 연결해서 React의 view가 어떻게 처리되는지 보고싶을때, 데이터가 어떻게 들어가있는지 확인하고 싶을때 사용할 수 있다. postman https://www.postman.com/ Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. www.postman.com Post Man을 쓰기 전에, 먼저.. 2022. 9. 2.
React에서 reduxtoolkit 사용해보기 .with AsyncThunk // redux/modules/postSlice.js import { createAsyncThunk,createSlice } from "@reduxjs/toolkit"; const initialState = { // 초기값, data, isLoading, error로 상태관리 posts: [], isLoading: false, error: null, }; const postsSlice = createSlice({ name:"posts", initialState: [], reducers: { createPost: (state,action) =>{ // 액션 생성함수 state = state.concat(action.payload); // dispatch 실행부분 } } }) export const {} =.. 2022. 9. 1.
React에서 redux 사용해보기 toolkit x 0. 리덕스 설치 // npm npm install react-redux // yarn yarn add redux react-redux - src - redux 폴더 생성 - `redux` 폴더 안에 `config`, `modules` 폴더를 생성 - 생성할 state들의 그룹 - `config` 폴더 안에 `configStore.js`파일을 생성 - 중앙 관리소인 Store를 만드는 설정 코드들이 있는 파일 - modules 폴더 안 store.js(store는 사이트 목적에 맞게) 1. 스토어 생성 // src/configStore.js import {createStore, combineReducers} from "redux"; import todo from "./modules/to.. 2022. 8. 22.
728x90

티스토리툴바