[React] Redux 간단 개념 정리

액션 타입

---

상태를 변화시키는 액션의 타입을 지정

const INCREMENT = 'counter/INCREMENT';

 

액션 객체

---

상태를 변화시키는 액션객체를 생성

type 값이 필수

{ type: CHANGE_COLOR, color }

 

액션함수

---

액션객체를 만들기 위한 함수

 

export const changeColor = color => ({ type: CHANGE_COLOR, color });

리듀서

---

상태를 변화시키는 함수

현재상태와 액션객체를 파라미터로 전달받음

리턴값으로 변경된 상태값을 전달

인풋값과 아웃풋은 항상 동일해야한다

 

export default function counter(state = initialState, action){
    switch(action.type){
        case CHANGE_COLOR:
            return {
                ...state,
                color: action.color
            };
        case INCREMENT:
            return {
                ...state,
                number: state.number + 1,
            };
        case DECREMENT:
            return {
                ...state,
                number: state.number - 1,
            };
        default:
            return state;
    }
}

 

스토어

---

현재상태와 리듀서 및 내장함수를 포함하고있음

한 어플리케이션에 하나의 스토어만 있는게 좋음 1개 이상 존재 시 리덕스 개발자도구 사용할수없음?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import rootReducer from './store/modules';
import { Provider } from 'react-redux';

const devTools = 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(rootReducer, devTools);
console.log(store.getState());

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

 

디스패치

---

상태를 변화시키는 액션 발생시키는 함수

// 액션을 디스패치하는 함수를 만들어서 props로 넣어줍니다.
const mapDispatchToProps = dispatch => ({
    changeColor: color => dispatch(changeColor(color)),
});

 

구독

---

스토어에서 상태가 변경될때마다 값을 받을수있도록 함수를 전달

react-redux 설치 시 자동으록 구독됨

 

 

컨테이너 컴포넌트

---

리덕스 스토어와 연결된 컴포넌트

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Palette from '../components/Palette';
import { changeColor } from '../store/modules/counter';

class PaletteContainer extends Component {
    
    handleSelect = color => {
        console.log('handleSelect props: ', this.props);
        console.log('color: ', color);
        const { changeColor } = this.props;
        changeColor(color);
    }

    render(){
        console.log('props: ', this.props);
        const { color } = this.props;
        return <Palette onSelect={this.handleSelect} selected={color}/>;
    }
}


// 컴포넌트에 내려줄 스토어의 state값을 정의
const mapStateToProps = state => ({
    color: state.counter.color,
});

// 액션을 디스패치하는 함수를 만들어서 props로 넣어줍니다.
const mapDispatchToProps = dispatch => ({
    changeColor: color => dispatch(changeColor(color)),
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PaletteContainer);

 

connect 함수에 넘겨주는 파라미터

---

• mapStateToProps컴포넌트에서 사용할 state값을 컴포넌트의 props로 내려주는 함수

// 컴포넌트에 내려줄 스토어의 state값을 정의
const mapStateToProps = state => ({
    color: state.counter.color,
});

 

스토어에 가지고있는 전체 상태값이

{

   color: 'red',

   count: 0

}

이라면

 

위처럼 color만 받아와서 컴포넌트에 전달해줄수있다

 

• mapDispatchToProps
  • 액션을 디스패치하는 함수를 만들어서 props로 내려주는 함수

// 액션을 디스패치하는 함수를 만들어서 props로 넣어줍니다.
const mapDispatchToProps = dispatch => ({
    changeColor: color => dispatch(changeColor(color)),
});

props  changeColor라는 이름의 컬러값을 받아 액션객체를 만들어 디스패치하는 함수를 해당 컴포넌트에 내려줌

 

 

비동기 처리

---

리덕스에서 네트워크 비동기 처리 같은부분은 액션생성함수 or 미들웨어로 처리

 

 

React-Redux 라이브러리 함수

---

connect : 컴포넌트를 리덕스 스토어와 연결해주는 함수, HOC 컴포넌트, 클래스 컴포넌트에서만 사용 가능

 

Provider : 리액트 프로젝트를 스토어와 연결하기 위한 컴포넌트