[react] react-redux 사용법

기본적인 flux, redux 개념을 알고 있다는 가정하에 예제를 사용하여 설명한다

(이것은 본인이 공부한 내용의 이해를 돕기위해 작성되었다.)

먼저 Action, Reducer 를 각각의 파일로 나눠서 관리하겠다.

1. actions.js

export const RANDOM_STRING = 'RANDOM_STRING'; 

export function generateRandomString(size) {
  const _genRandomString = (size) => {
    let text = '';
    const table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for(let i = 0 ; i < size; i++){
      text += table.charAt(Math.floor(Math.random() * table.length));
    }
    return text;
  };

  return {
    type: RANDOM_CHAR,
    value: _genRandomString(size),
  }
}

- 외부 컴포넌트에서 action의 type 과 값을 넘겨 줄 수 있도록 export 해주자.

- reducer는 순수 함수로 작성되어야 하기 때문에, 랜덤생성한 값은 action 에서 생성해서 값만 reducer로 념겨주자.

2. reducers.js

import {RANDOM_STRING} from '../actions/actions';

// 여러개의 reducer 를 한개로 합칠때 사용되는 redux 내장 메소드
import {combineReducers} from 'redux';

const randomReducer =
  (state = {value: 'default string'}, action) => {
    switch (action.type){
      case RANDOM_STRING:
        return Object.assign({}, state, {
          value: action.value,
        });
      default:
        return state;
    }
  };

export default randomReducer;

- 외부 컴포넌트에서 생성한 reducer를 사용하기 위해 export 해주자

- reducer는 순수 함수가 되어야 한다, 따라서 인자를 바꿔선 안되며, API 호출, 라우팅 전환과 같은 사이트이펙트를 일으키면 안된다, 또한 Date.now(), Math.Random()과 같이 순수하지 않은 함수를 사용하면 안된다. (따라서, 우리는 actions.js에서 난수를 생성하여 값만 reducer에서 사용하도록 함)

-Object.assign(a, b, c) 구문은, 인자값을 변형하면 안되기 때문에, a인자({})에 b인자(state)를 복사하는 것이며, a인자의 내부 속성값을 c인자처럼 바꾸겠다는 것이다.

이것은 값을 복사하여 사용하고, 변경한 값을 반환하는 것으로, 인자값의 변경은 절대 일어나지 않는다.

3. index.js

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import randomReducer from './redux/reducers/reducers';

// reduces 를 sotre 에 등록
let store = createStore(randomReducer);

const appElement = document.getElementById('app');

ReactDOM.render(
  //Application 에서 store 를 공급(제공)하기 위해 사용
  <Provider store={store}>
    <App/>
  </Provider>,
  appElement);

- index (root) 에 store를 만들고 <Provider /> 로 감싸주자.

4. ReduxTest.js

import React from 'react';
import {connect} from 'react-redux';

import {increment, decrement, generateRandomString} from "../../redux/actions/actions";
import Button from 'material-ui/Button';

class ReduxButton extends React.Component{
  render() {
    return (
      <div>
        <Button onClick={ this.props.onGenRandomChar }>
          generate random char
        </Button>
      </div>
    )
  }
}

// dispatcher 를 컴포넌트의 props 에 매핑 한다.
let mapDispatchToProps = (dispatch) => {
  return {
    onGenRandomChar: () => dispatch(generateRandomString(10)),
  }
};

// Provider 를 통해 제공받은 store 와 연결하기 위한 연결자
ReduxButton =
  connect(undefined, mapDispatchToProps)(ReduxButton);


class ReduxText extends React.Component {
  render() {
    return (
      <div>
        <h1>CHAR: {this.props.randomValue}</h1>
        <ReduxButton/>
      </div>
    );
  }
}

// this.state 가 아닌 컴포넌트의 props 에 데이터를 추가 한다.
let mapStateToProps = (state) => {
  return {
    // value 는 해당 컴포넌트의 props.value 와 같다.
    randomValue: state.value,
  };
};

// Provider 를 통해 제공받은 store 와 연결하기 위한 연결
ReduxText = connect(mapStateToProps)(ReduxText);

export default ReduxText;

- 주석으로 설명을 대신한다.

5. 결과 화면