redux, connect 함수, dispatch 함수 개념

뿌이·2022년 7월 5일

react 15버전

목록 보기

9/17

react redux 장점

store를 하위컴포넌트에 매번 상속하지 않고 사용 가능
스토어 데이터를 사용, 변경하는 코드를 모듈화 해(store안에 들어있으므로..)
컴포넌트 내에 중복된 코드 사용을 최소화

redux 데이터 흐름

스토어 -> dispatch -> 컴포넌트 -> 액션 -> 리듀서 -> 스토어

이 순으로 변경한다.

Reducer란

reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

connect함수란

특정 함수 또는 값을 props로 받아와서 사용하고 싶은 경우에 사용
redux store안에 있는 상태를 props로 넣어줄 수도 있고,
액션을 디스패치하는 함수를 props로 넣어줄 수도 있다.

connect 함수는 리액트 앱의 하위 컴포넌트에서 redux store를 접근하는 것을 가능하게 해주는 역할을 한다. 이 함수를 이용해서 컴포넌트 단에서 redux store에 접근하고 액션을 호출 할 수 있게 된다.
하위 컴포넌트 단에서는 Provider에서 제공하는 store 함수를 connect 함수를 통해서 받아온다.

provider 예시 코드

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from 'redux';
import {Provider} from 'react-redux'
import reducers from './reducers';

const store = createStore(reducers);

const listener = ()=> {
    ReactDOM.render(
        <Provider store={store}>
            <App indexProp="react"/>
        </Provider>,
        document.getElementById('root')
    );
};

store.subscribe(listener);
listener();

provider로 store을 제공하여,
하위 컴포넌트인 App에서 store에 접근하고 액션을 호출 할 수 있게 한다.

예시 코드

import React from 'react';
import { connect } from 'react-redux';
import BlogDetail from './BlogDetail';


class BlogMain extends React.Component {
    render() {
        console.log(this.props.text)
        console.log(this.props.number)
        return (
            <div>
                <p>BlogMain component</p>
                <BlogDetail />
            </div>
        )
    };
};
const mapStateToProps = (state) => { //이 함수가 connect로 이어지잖아??
  //그 뜻은 mapStateToProps 함수에서 return되는 값은
  //BlogMain 컴포넌트에서 props로 쓸 수 있다는 것이다!!!!!
    return {
        text: state.text,
        number: state.number
    }
};
export default connect(mapStateToProps)(BlogMain);

보통 connect 함수를 쓸 때는
connect(mapStateToProps, mapDispatchToProps) 이렇게 사용한다.

mapStateToProps는 컴포넌트에 props로 넣어줄 리덕스 스토어의 상태에 관련된 함수이고
(스토어에서 가져옴)

mapDispatchToProps는 컴포넌트에 props로 넣어줄 액션을 디스패치 함수에 관련된 함수
(dispatch로 action을 객체로 전달하여, dispatch를 통해 state를 업데이트)
(액션에서 가져옴)