Redux 란? (+example)

Redux 란?

 

웹이 넓어질수록 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다.

항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고,

이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다.

어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 이에 대한 해결책으로 나온 리덕스는,

가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다.

또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다.

즉 리덕스는 글로벌 상태 관리를 하게 될 때 굉장히 효과적입니다.

 

출저 : https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt

Redux (1) 소개 및 개념정리

Redux 가 필요한 상황

• 시간에 따라 바뀌는 충분한 양의 데이터가 있다

• 상태를 위한 단 하나의 원천이 필요하다

• 모든 상태를 가지고 있기에 최상위 상태는 더 이상 적당하지 않다

---

Redux는 상태 관리 도구입니다. 주로 React와 함께 사용되며 다른 JavaScript 프레임 워크 또는 라이브러리와

함께 사용할 수 있습니다.

2KB (종속성 포함)로 가벼워서 응용 프로그램의 자산 크기가 커질 까 걱정할 필요가 없습니다.

Redux를 사용하면 state 를 공용의 store 라는 공간에서 관리하며 각 구성 요소는 이 store 에서 필요한 모든

상태에 액세스 할 수 있습니다.

React, Angular 등과 같은 대부분의 라이브러리는 외부 라이브러리 나 도구 없이도 구성 요소가 내부적으로

상태를 관리 할 수있는 방법이 존재합니다. 그렇지만 구성 요소가 적은 응용 프로그램에는 적합하지만 프로젝트

규모가 커질수록 구성 요소 간에 공유되는 state 를 관리하는 것이 점점 어려워 집니다.

---

example

간단한 카운터 생성

1. action type 설정

 

action 함수에 type 을 설정합니다.

const INCREMENT = 'counter/INCREMENT';
const DECREMENT = 'counter/DECREMENT';
// "액션의 종류를 한번에 식별할 수 있는 문자열 혹은 심볼"

 

2. action 함수 생성

 

reducer 에 전달되는 함수로 payload 의 지정한 값을 사용할 수 있습니다.

/*{
  type: INCREMENT,
 // payload: "액션의 실행에 필요한 임의의 데이터",
}*/

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

3. initial State 지정

 

state 의 초기 값을 지정합니다. (reducer 에 state 에 초기 값으로 사용됩니다.)

const initialState = {
  number: 0,
};

4. reducer 생성

 

인자로 받은 action 에 따라 state 를 변경해주는 역할입니다. case 에 따라 state 를 immutable 하게 변경합니다.

(default 로는 state 를 리턴합니다.)

export default function counter(state = initialState, action) {
  switch (action.type) {
// 액션 타입에 따라 switch
// Spread operator 사용으로 state 값을 각각 새로운 객체와 배열에 복제 후 수정 
    case INCREMENT:
      return {
        ...state,
        number: state.number + 1,
      };
    case DECREMENT:
      return {
        ...state,
        number: state.number - 1,
      };
    default:
// https://stackoverflow.com/questions/4649423/should-switch-statements-always-contain-a-default-clause
      return state;
  }
}

5. store 생성 ( with provider )

 

state 를 관리하고 props 로 전달해줄 공간 store 를 생성합니다.

Provider 는 컴포넌트로, 하위 컴포넌트들이 Provider를 통해 redux store에 접근이 가능해집니다.

import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);
// 

// console.log(store.getState()); => store 값 확인
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

++reducer 가 여러개일 경우?

import { combineReducers } from 'redux';
// 여러개로 나뉘어진 reducer 들을 serve 라고 칭하고 하나로 합쳐진 것을 root 라고 한다.
import counter from './counter';

export default combineReducers({
  counter,
  // 여러 reducer 를 여기에 넣어줍니다.
});

/* 
{
  counter: {
    number: 0,
  },
  // ... 다른 reducer 에서 사용하는 initial state 들
}
*/

6. component 생성

import React from 'react';
import './Counter.css';

const Counter = ({ color, onIncrement, onDecrement }) => {
  console.log('store 에서 받아온 값==>', value);
  // 처음 설정된 initial state 값이 들어오겠죠?
  return (
    <div className="Counter">
      <h1>{value}</h1>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  );
};

export default Counter;

7. props 로 store state 를 받아 전달해주는 Contatiner component 생성

import React, { Component } from 'react';
import { connect } from 'react-redux';
// connect는 react-redux 의 내장 API 입니다. 
// 이 함수는 React Component 를 Redux Store에 ‘연결’ 해줍니다.
import Counter from '../components/Counter';
import { increment, decrement } from '../store/modules/counter';

class CounterContainer extends Component {
  handleIncrement = () => {
    this.props.increment();
// action 함수 increment 가 실행 -> type 에 맞는 reducer 실행 -> state 변경 -> props 로 전달
  };
  handleDecrement = () => {
    this.props.decrement();
  };
  render() {
    const { number } = this.props;
    console.log(number);
    return (
      <Counter
        // color={color}
        value={number}
        onIncrement={this.handleIncrement}
        onDecrement={this.handleDecrement}
      />
    );
  }
}
7
const mapStateToProps = ({ counter }) => ({
  number: counter.number,
});

const mapDispatchToProps = { increment, decrement };

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

mapStateToProps() 함수에서 return 된 값이, 해당 컴포넌트의 props 로 들어갑니다.

이 mapStateToProps 함수를 마지막 줄 connect의 첫 번째 인자로 받습니다.

( 컴포넌트는 렌더링 될 때, store 를 props로 전달받습니다. )

mapDispatchToProps() 함수는 store에 접근한 컴포넌트가 store의 상태를 바꾸기 위해

dispatch 를 사용할수 있게 만들어줍니다.

 

---

참고자료

https://velog.io/@velopert/Redux-3-%EB%A6%AC%EB%8D%95%EC%8A%A4%EB%A5%BC-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%99%80-%ED%95%A8%EA%BB%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-nvjltahf5e

Redux (3) 리덕스를 리액트와 함께 사용하기