개발(라이브러리,프레임워크)/react.js & react native32 redux-devtools 설치 npm i redux-devtools-extension -D composeWithDevTools 사용 import { applyMiddleware, createStore } from 'redux' import todoApp from './reducers/reducer' import {composeWithDevTools} from 'redux-devtools-extension'; import thunk from 'redux-thunk'; //applyMiddleware는 함수를 리턴할떄만 반응하고 객체를 리턴할때는 const store = createStore(todoApp, composeWithDevTools(applyMiddleware(thunk))); export default store; 2022. 2. 2. 리덕스 미들웨어 미들웨어가 디스패치 앞뒤에 코드를 추가할 수 있게 해준다. 미들웨어가 여러개이면 미들웨어가 순차적으로 실행된다. 2단계가 있음 스토어를 만들때 미들웨어를 설정하는 부분 {createStore, applyMiddleware} from redux 디스패치가 호출될떄 실제로 미들웨어를 통과하는 부분 dispatch 메소드를 통해 store로 가고있는 액션을 가로채는 코드 직접 만들어보기 store.js import { applyMiddleware, createStore } from 'redux' import todoApp from './reducers/reducer' function middleware1(store){ console.log("middleware1", 0); return(next) => { co.. 2022. 2. 1. Async Action 비동기작업 어디서 하느냐가 제일 중요하다. 액션을 분리 dispatch를 할때 비동기 작업 해준다. 리듀서는 동기적인것 dispatch도 동기적인것 App.js import './App.css'; import TodoListContainer from './containers/TodoListContainer' import TodoFormContainer from './containers/TodoFormContainer' import UserListContainer from './containers/UserListContainer'; function App() { return ( ); } export default App; reducer.js import { combineReducers } from 'red.. 2022. 1. 31. Redux 를 React에 연결(라이브러리x) react-redux 라이브러리 안쓰고 연결하기 단일 store을 만들고 subscribe 와 getState를 이용하여 변경되는 state데이터를 얻어 props로 계속 아래로 전달하기 componentDidMount > subscribe componenWillUnMount > unsubscribe index.js ReactDOM.render( , document.getElementById('root') ); store를 props로 내려준다. App.js import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from 'react'; import { addTodo } from './redux/actions'; .. 2022. 1. 21. 이전 1 2 3 4 5 6 7 8 다음 반응형
