프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

DEV

[ react] react-redux

2024.02.25
북마크 작성자 정보
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 : 

이 포스트 공유하기

답글쓰기 전체목록