[Redux기초]Redux 사용하기

유데미 강좌를 통해 작성하였습니다.

간단한 counter증가 예제를 통해 리덕스의 흐름을 복습.

 

 

리덕스를 사용하기 위해 라이브러리를 설치해준다.

npm install redux react-redux

1.Store 생성하기

Store는 전역 상태를 저장하는 공간이다. 리덕스에서 Store는 하나만 존재해야 한다.

여러개의 스토어를 사용할 수는 있지만, 그럼 개발 도구를 활용해 상태를 추적할 수 없게 된다.

store는 reducer를 인자로 받는다. 현재 createStore를 사용하면 취소선이 그어지는데,

리덕스에서 리덕스 툴킷의 configureStore를 쓰길 권장하고 있기 때문이다.

기능상의 문제는 전혀 없으니 사용해도 괜찮지만, 취소선을 없애고 싶다면..

-RTX configureStore를 사용한다.

-as를 통해 이름을 바꿔서 사용한다.

 

 

2.reducer 생성하기

리듀서는 저장소의 변화를 주는 순수한 함수이다. 저장소(store)에 접근해 action객체를 전달한다. 

이전 상태를 절대 변화시키지않고 새로운 상태를 반환해야한다.

state와 action을 매개변수로 받는다. 

const initialState ={
	counter:0,
}

const counterReducer = (state = initialState,action){
	switch(action.type){
    	case 'increase':
        	return{
            	counter:state.counter+1
            }
        case 'decrease':
        	return{
            	counter:state.counter-1
            }
    }
}

 

reducer를 store에 넣어주고 export해준다.

const store = createStore(counterReducer);
export default store;

 

3.Store를 제공하기

store를 만들고 모든 컴포넌트에 접근 할 수 있도록 컴포넌트의 최상단 index.js로 이동해준다.

Provider를 react-redux로부터 import해준다. 

context에서 Provider로 감싸준것과 비슷하게 Redux도 컴포넌트들이 Store에 접근할 수 있도록 Provider를 사용한다.

 

4.Store 구독하기

store를 가져와서 상태를 불러오기 위해 useSelector를 사용할 수 있다.

이 hook은 매개변수로 함수를 받고 상태 객체 전체에서 일부분만 쉽게 잘라내서 가져올 수 있다.

const counter = useSelector(state =>state.counter);

store를 가져오기 위한 방법

• useStore : Redux스토어에 대한 완전한 엑세스를 제공한다.
• useSelector : 스토어의 특정 부분의 상태만 가져올 수 있는 간단한 방법을 제공한다.
• connect : 클래스형 함수에서는 hook을 사용할 수 없으므로 connect를 사용한다. 

 

5.action 전달하기

상태에 어떠한 변화를 줘야한다면 리듀서에 action 을 전달해서 바꿀 수 있다.

액션 객체는 type을 필수적으로 갖는다.액션을 전달할 때는 useDispatch를 호출하여 전달할 수 있다.

  const dispatch = useDispatch();
  
const incrementHandler = () => {
  dispatch({ type: "increment" });
};

 

💡액션 생성자 함수

액션 생성자 함수는 액션 객체를 생성하는 함수이다.  이것을 이용하면 코드가 간결해지며 객체의 구조를 일관되게 유지할 수 있다.

// action creator
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

const increment = (amount) => {
	return {type: INCREMENT};
};
const decrement = ()=>{
	return {type : DECREASE}
}
//reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case INCREASE:
      return {
        counter: state.counter + 1
      };
    case DECREASE:
      return {
        counter: state.counter - 1
      };
    default:
      return state;
  }
}

//counter.js
const incrementHandler = () => {
  dispatch(increment());
};
const decrementHandler = () => {
  dispatch(decrement());
};

 

💡액션의 payload

액션 객체는 반드시 type속성을 갖는다고 했다. 그 외  추가 정보를 주기 위해 payload라는 속성을 사용 할 수 있다.

//counter.js
const increaseHandler =()=>{
  dispatch({type:'increase',value:5})
}

//reducer
const counterReducer = (state = initialState,action){
	switch(action.type){
    	case 'increase':
        	return{
            	counter:state.counter+action.value
            }
    }
}




//생성자 함수의 payload
const increment = (amount) => {
  return {
    type: 'INCREMENT',
    payload: {
      amount
    }
  };
//dispatch하기
dispatch(increment(5));