Redux

1.Redux란?

상태 관리 라이브러리다.

 

복잡한 애플리케이션을 쉽게 만들어 준다.

 

리액트 앱을 만들지 않아도 된다.

 

리액트를 위해서만 사용하지 않는다.

 

2.왜 Redux를 사용해야 할까?

Redux

 

Redux

 

2.Redux Cycle

Redux Cycle

 

Redux Cycle

 

3.Redux 예제 1

actions/index.js

export const selectSong = song => {
    return {
        type: "SONG_SELECTED",
        payload: song
    }
}

reducers/index.js

import { combineReducers } from "redux"

const songsReducer = () => {
    return [
        { title: 'No Scrubs', duration: '4:05' },
        { title: 'Macarena', duration: '2:30' },
        { title: 'All Star', duration: '3:15' },
        { title: 'I Want it That Way', duration: '1:45' }
    ]
}

const selectedSongReducer = (selectedSong = null, action) => {
    if(action.type === "SONG_SELECTED") {
        return action.payload
    }

    return selectedSong
}

export default combineReducers({
    songs: songsReducer,
    selectedSong: selectedSongReducer
})

 

combineReducer를 이용해 reducer들을 한 곳에 모은다.

 

SongList.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { selectSong } from "../actions"

class SongList extends Component {
  renderList() {
    return this.props.songs.map((song) => {
      return (
        <div className="item" key={song.title}>
          <div className="right floated content">
            <button
              onClick={() => this.props.selectSong(song)}
              className="ui button primary"
            >
              Select
            </button>
          </div>
          <div className="content">{song.title}</div>
        </div>
      );
    });
  }
  render() {
    return <div className="ui divided list">{this.renderList()}</div>;
  }
}

const mapStateToProps = (state) => {
  return { songs: state.songs };
};

export default connect(mapStateToProps,{ selectSong })(SongList);

mapStateToProps를 통해 store에 저장된 songs 리듀서를 가져오고 있다.

 

이를 통해서 SongList 클래스 에서는 this.props.songs를 통해

 

songs리듀서에 접근할 수 있다.

 

또한 selectSong 액션을 connect에 넣음으로써

 

this.props.selectSong을 통해 액션에 접글할 수 있다.