[React] 4주차 스터디 - (심화) React Redux

Redux 구성 요소

• store: 애플리케이션의 상태 저장, 내에 Reducer 함수 존재
• Dispatch: Ruducer 함수에게 Action 송신
• Action: 발생된 이벤트와 API로서의 데이터 수신 등 상태를 갱신하기 위한 정보를 담은 object, Dispatch를 통해 Action을 Reducer로 보낼 수 있음
• Reducer: Dispatch를 통해 받은 Action을 토대로 state를 modify, 갱신, 변경할 수 있는 유일한 함수
• View: 애플리케이션의 유저 인터페이스(UI)

Setup

npm i react-redux react-router-dom

Connecting the Store

• store.subscribe(): 변경 상태를 알려줌
• store.js 작성

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

export const addToDo = (text) => {
    return {
        type: ADD,
        text
    };
};

export const deleteToDo = (Text) => {
    return {
        type: DELETE,
        id
    };
};

const reducer = (state = [], action) => {
    switch (action.type) {
        case ADD:
            return [{ text: action.text, id: Date.now() }, ...state];
        case DELETE:
            return state.filter(toDo => toDo !== action.id);
        default:
            return state;
    }
}

const store = createStore(reducer);

export default store;

• store 연결
• Redux에서는 Provider 컴포넌트를 통해 앱의 다른 컴포넌트에서 Redux store를 사용할 수 있음

import React from "react";
import ReactDOM from "react-dom"
import App from "./components/App";
import { Provider } from "react-redux"
import store from "./store";

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

mapStateToProps

• store.getState(): 현재 state를 전달
• connect(): store를 사용하기 위해 컴포넌트를 연결

connect(mapStateToProps, mapDispatchToProps)(Home);

• Home: 취득한 데이터를 props로 사용하고 싶은 컴포넌트 지정
• mapStateToProps(): store로부터 state를 가져와서 컴포넌트의 props로 보내게 해줌. mapStateToProps에서 return 된 값이 컴포넌트의 props에 추가됨.

function mapStateToProps(state, ownProps?)

• state: store로부터 온 state
• ownProps: 생략 가능. 컴포넌트가 현재 가지고 있는 모든 props를 보여줌

mapDispatchToProps

• mapDispatchToProps(): action을 reducer 함수에게 보내는 역할을 가진 dispatch를 props로 보낼 수 있음

function mapDispatchToProps(dispatch, ownProps?)