[리액트] Redux

Redux

: state를 관리하는 라이브러리이다.

 

Redux의 기본 개념 

1.Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 온다.

2. State is Read-Only

• 리엑트에서는 setState 메소드를 활용해야 상태 변경이 가능하다.
• 리덕스에서는 액션이라는 객체를 통해서 상태를 변경할 수 있다,

3. Changes are made with pure function

• 변경은 순수함수로만 가능하다.
• Store - Action - Reducer

- store : 상태가 관리되는 하나의 공간

- action : 앱에서 스토어에 운발할 데이터 (js객체 형식으로 되어 있다.)

- reducer : action을 보고 store에 상태를 업데이트 한다. action을 reducer에 전달하기 위해서는 dispatch() 메소드를 사용한다.

예제) 숫자 증가

1. 의존성 추가

npm install --save react-redux

2. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore} from 'redux';
import reducers from './reducers';
import {Provider} from 'react-redux';

const store = createStore(reducers);

const listener = () => {
  ReactDOM.render(
    <Provider store={store}>
        <App indexProp="코딩병원119"/>
    </Provider>,  
    document.getElementById('root')
  );
}

// 구독을 해야 store 데이터에 변화가 있을 때, listner 함수의 render를 실행하고 변경된 데이터를 렌더링
store.subscribe(listener);
listener();

Provider에게 데이터를 전달해주면 중간 컴포넌트 props 값을 다시 전달해줄 필요 없이 모든 하위 컴포넌트에서 데이터 사용이 가능하다.

 

3. App.js

import React, { Component } from 'react';
import StrAddButton from './StrAddButton';
import './App.css'
import {connect} from 'react-redux'

class App extends Component {
  render() {
    return(
      <div className="App-header">
        <h1>코딩병원에 오신 것을 환영합니다.</h1>
        <span>{this.props.str}</span>
        <br/>
        <StrAddButton AddProp="100"/>
      </div>
    )
  }
}

/*
  데이터 세팅.
  @param {object} state 스토어의 state 변수 
  @param {object} props 부모 컴포넌트에서 전달한 props
  @returns {any} str store의 state 값
 */
let mapStateToProps = (state, props) => {
  console.log(props.indexProp)
  return {
    str: state.data.str
  };
};

// connect의 첫번째 파라미터를 통해 store의 state에 접근 가능
App = connect(mapStateToProps, null)(App);

export default App;

4. StrAddButton.js

import React, {Component} from 'react';
import {add} from './actions';
import {connect} from 'react-redux';

class StrAddButton extends Component {
    render() {
        return(
            <input value="+100" type="button" onClick={this.props.addString} />
        )
    }
}

/*
 데이터 세팅.
 @param {func} dispatch 
 @param {object} props 부모 컴포넌트에서 전달한 props
 @returns {any}
 */
let mapDispatchToProps = (dispatch, props) => {
    // App.js에서 전달한 props 변수
    console.log(props.AddProp)
    return {
        addString: () => dispatch(add())
    }
}

// connect에 reducer에 액션 전달하는 dispatch 사용
StrAddButton = connect(null, mapDispatchToProps)(StrAddButton);

export default StrAddButton;

dispactch를 통해 action을 호출한다.

 

5. action폴더 -> index.js

export const ADD = 'ADD';
export const add = () => {
    return {
        type: ADD
    }
}

 

6. reducers폴더 -> index.js

import {ADD} from '../actions'
import {combineReducers} from 'redux';

const initState = {
    str: 100
}

const data = (state = initState, action) => {
    switch (action.type) {
        case ADD:
            return state, {
                str: state.str + 100
            };
        default:
            return state;
    }
}

const App = combineReducers({
    data
})

export default App;

출처: https://itprogramming119.tistory.com/entry/React-react-redux-예제 [코딩병원:티스토리]