React redux

Redux
- 상태 관리 라이브러리이며, 리액트 뿐만 아니라 모든 JS코드에서 작동된다.
- Flux 패턴을 기반으로 생성되었기 때문에 단방향으로 동작하여 흐름을 파악하기 쉽고 예측하기 쉽다.

1. 컴포넌트(Component)
- Action이 발생한다.
- 나중에 변경된 state를 반영하기 위하여 Store가 subscribe(구독)을 해놓는다.

2. 액션(Action)
- 변화가 필요할 때 발생시키는 신호
- Dispatch() 감싸서 전달하면 Reducer가 받아서 해당 분기를 실행한다.
- Action에는 Type(구분점)을 필수로 담고 데이터(파라미터)를 같이 담아서 들고간다. Payload라고 한다.
- 이후 리듀서에 전달되기 전에 Store에서 state를 가져와 Action과 함께 리듀서에 전달된다.

3. 리듀서(Reducer)
- 전달받은 Action에서 Type을 가져온 뒤 구분하여 state를 변경하는 등 알맞는 로직(함수)가 실행되는 순수함수이다.

4. 스토어(Store)
- state를 저장하는 저장소이며, subscribe 해놓은 컴포넌트로 가서 변경된 state의 값을 전달해준다.

 

☆ Code

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { decrease, increase } from '../../redux/modules/count';

const Counter = () => {
    const number = useSelector((state) => state.number);
    const dispatch = useDispatch();
    return (
        <div>
            <h1>{number}</h1>
            <div className="">
                <button onClick={() => dispatch(decrease())}>-1</button>
                <button onClick={() => dispatch(increase())}>+1</button>
            </div>
        </div>
    );
};

export default Counter;