북마크 작성자 정보
작성일/수정일
2024-02-25 12:19:14 / 2024-02-25 12:19:14
react-redux
1. npm install redux react-redux
2. createStore 생성
3. 스토어를 생성할때 functoion reducer(currentState, action){} 함수 생성 reducer 함수는 store에 있는 state를 어떻게 바꿀 것인지 결정, 2개의 파라미터 중 첫 번째는 현재의 state 값인 currentState, 두번째는 현재의 값을 어떻게 바꿀 것인지 action으로 이루어짐
이렇게 값을 리턴하면 리턴 값을 새로운 state에 반영
import React, { createStore} from 'redux';
import {Provider, useSelector, useDispatch, connect} from 'redux';
function reducer(currentState, action){
return;
}
const store = createStore();
4. redux
- Provider : 적용할 state 상단에 정의 합니다. store를 반드시 정의 해야함
export default App(){
return(
<div id="container">
<h1>root</h1>
<div id="grid">
<provider store={store}>
<Left1 />
<Left2 />
</provider>
</div>
</div>
);
}
- useSelector : 어떤 state 값을 사용하는지 선택 함수를 인자로 받는다.
function Left3(props){
function f(state){
return state.number;
}
const number = useSelect(f); /* useSelect는 함수를 인자로 받는다. f라는 함수를 인자로 받는 예 */
return(
<div>
<h1>LEFT3</h1>
</div>
);
}
- useDispatch : state 값을 변경 할 때 사용
function Right3(props){
const dispatch = useDispatch();
return(
<div>
<h1>root</h1>
<input type="button" value="+" onClick={ ()=>{dispatch({ type:'plus'})} } />
</div>
);
}
- connet :