[Raect] Redux

Redux?

외부 라이브러리 중 인기있고 근본인 전역상태관리 라이브러리다

리덕스를 시작하기에 앞서, redux, react-redux 모듈이 필요하다

npm install redux react-redux

 

 

 

 

FLUX 패턴의 데이터 흐름

리덕스가 어떤 구성요소들로 구성되어 있는지

구성요소들 사이에서 데이터들이 어떻게 흐르는지 중요하다

 

UI에서 상태변화가 필요한 이벤트가 발생하면
상태를 어떻게 변화시킬 것인지 정보를 담은 Action객체를 만들어내고
Action객체는 Dispatch를 통해 Reducer로 전달된다
Reducer에서 Action객체를 해석하고 그 값에 따라서 Store에 들어있는 전역상태를 변경시킨다

상태가 변경되면은 UI도 변경된 상태에 맞춰 리렌더링 되는 식으로
이런 형태를 flux 패턴이라 한다

 

Action의 역할 

// 액션 객체
{
    type: 'INCREMENT'
    payload: 5
}

// 액션 생성자
const increment = (num) => ({
    type: 'INCREMENT'
    payload: num
})

상태를 어떻게 변화시킬 것인지에 대한 내용이 담겨있는 {객체}다
type에 'INCREMENT'또는 'DECREMENT' 문자열을 담을 수 있고
여기에다가 payload로 특정한 값을 활용해서 상태를 변경하는 데이터를 추가할 수 있다

 

객체를 그때그때 만드는것이 번거롭다 느낀다면
액션 생성자를 만들어 액션객체를 반환시키는 함수를 만들어서 그때마다 만들어 사용할 수 있습니다
함수에 전달받은 인자를 사용해 payload를 동적으로 변화시킬 수 있기 때문에
좀 더 편리하게 액션객체를 생성할 수 있게 됩니다

 

 

dispatch의 역할 

// 액션 객체
dispatch({
    type: 'INCREMENT'
    payload: 5
})

// 액션 생성자
dispatch(increment(5))

액션 객체를 reducer로 넘겨주는 역할을 하는 함수로

dispatch 함수에 액션객체를 인자로 전달하면, 전달된 객체가 리듀서로 넘어가게된다

dispatch 함수를 사용하는 방법은 액션객체 타입마다 다르다

액션 객체일 경우, 작성된 객체를 dispatch함수에 인자로 전달해주면 된다
액션 생성자일 경우, 생성자 함수를 호출하고서의 리턴값을 dispatch 함수 인자로 전달해주면 된다

 

 

 

reducer의 역할 

// Reducer
const counterReducer = (state, action) => {
    switch (action.type) {
        case 'INCREMENT'
            return state + action.payload
    }
}

// 여러개의 Reducer를 하나로 묶기
const rootReducer = combineReducers({
    counterReducer, anyReducer, ...
})

리턴하는 값이 새로운 상태가 되는 함수로 두개의 인자를 갇는다
첫번째 인자는 상태값

두번째 인자는 dispatch로부터 전달받을 액션객체

이 액션객체의 type에 들어있는 문자열이 무엇이냐에 따라 상태를 변경시켜주는 로직이 바뀐다

 

스위치 조건문을 사용해서 type을 검사한 후, 서로 다른 값을 리턴한다
'INCREMENT'라면 기존 상태에 payload 값을 더해 리턴한다
즉, State에 payload를 더한 값이 새로운 State값이 되는 것이다

State를 한번씩 더해서 상태를 어떻게 변할것인지 추가적으로 작성할 수 있다

 

 

combineReducers

여러개의 reducer 존재할 때 하나의 reducer로 묶어줄 수 있다
객체 안에 묶어주고 싶은 리듀서를 순서대로 전달하면
combineReducers 함수를 호출하면서 인자들을 객체로 전달하는 식이다

 

 

store의 역할 

// Store
const store = createStore(rootReducer)

redux의 전역상태저장소로
createStore함수에 reducer를 전달해서 store를 생성할 수 있게 된다
이렇게 createStore함수에 만든 reducer를 전달하는 store가 생성된다

 

이 때 reducer를 하나만 전달 받을 수 있기 때문에
여러 reducer가 있다면은 combinerReducers를 사용해 하나의 reducer로 만들어줘야 한다

<Provider store={store}>
    <App />
</Provider>

마무리로 App.jsx에 <App />을 <Provider>로 감싸준다

 

 

만들어진 구성요소들은 react-redux에서 재공하는 기능을 사용해서
App.jsx에  </provider store={store}> 로 연결하고
상태저장소에서 상태꺼내서 사용하기 -> useSelector()
dispatch함수 만들어서 사용하기 -> useDispatch()

 

useDispatch() 

Redux store에 액션을 dispatch하는 함수로, Redux store에 액션을 보내 상태를 변경할 수 있다

 

useSelector() 

Redux store의 상태를 읽을 수 있게 해주며

Redux store의 특정 상태를 구독하고, 해당 상태가 변경되면 컴포넌트가 자동으로 리렌더링된다

 

 

 

Redux-Thunk?

Redux에서 비동기처리를 도와주는 미들웨어다
Action으로 객체말고도 함수를 사용할 수 있게 해줌으로써 비동기 처리를 도운다

객체를 받으면

타입에 있는 문자열을 검사해서

정해진 처리만 하게 되는데

 

함수를 받으면
함수는 여러개의 코드를 묶어줄 수 있기 때문에
함수 안에 있는 여러 줄의 코드를 실행시킬 수 있게 되고
이 함수를 실행할 때 프로미스를 쓰는 등 여러가지 처리도 가능하다