redux / Provider, useSelector, dispatch

r e a c t

redux / Provider, useSelector, dispatch

hee.hee 2022. 7. 7. 11:36

리덕스 키워드

액션 (Action)
상태에 변화가 필요할 때 발생시킴 (객체하나로 표현)
type을 필수로 그외의 값들은 개발자 마음대로 생성
액션 생성함수 (Action Creator)
컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함
필수 아님
리듀서 (Reducer)
변화를 일으키는 함수
현재의 상태와 액션을 참조하여 새로운 상태를 반환
스토어 (Store)
한 애플리케이션당 하나의 스토어
현재의 앱 상태와, 리듀서, 내장함수 포함
디스패치 (dispatch)
스토어의 내장함수
액션을 발생 시키는 것
구독 (subscribe)
스토어의 내장함수
subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출
(리액트에서는 connect 함수 또는 useSelector Hook 을 사용)

아래 링크의 sshusshu 님 댓글

https://react.vlpt.us/redux/01-keywords.html

Provider

바뀌는 state들을 어떤 컴포넌트에 제공할 것인가에 대한 가장 바깥쪽 울타리를 정의.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import './index.css';

// Redux 관련 불러오기
import { createStore } from 'redux'
import reducers from './reducers';
import { Provider } from 'react-redux';

// 스토어 생성
const store = createStore(reducers);

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