[React] Redux 란?

 

 

 

💡 Redux

redux를 사용하는 이유는 state 를 여러 컴포넌트에 전달하고 관리하기가 어렵기 때문에 store 를 통해 여러 컴포넌트에 쉽게 전달하고 관리할 수 있도록 만든다. 즉 Flux 와 같은 구조이다.

 

 

React 작업환경에서 Redux 사용하기 (라이브러리 설치)

npm install --save redux

npm install --save react-redux

npm install --save redux-actions

 

 

 

💡 흐름 : VIEW -> ACTION -> (STORE) -> REDUCER -> DISPATCH(ACTION) -> STATE -> UI

 

출처 : https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

 

index.js 작성

store 를 생성하고 store 를 <Provider>에 props 로 전달해서 컴포넌트 트리에 접근할 수 있도록 만든다. 그리고 App.js 에서 reducers 를 임포트한다.

 

 

 

 

App.js 에서 메인 코드 작성

 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {createAction, handleActions} from 'redux-actions';
class App extends Component {
  render() {
    return (
      <div>
        <h1>Redux 테스트</h1>
        <h1>{this.props.result}</h1>
        <button onClick={this.props.onInc}>더하기</button>
        <button onClick={this.props.onDec}>빼기</button>
      </div>
    );
  }
}

 

💡 Store

모든 어플리케이션의 state는 store에 저장되며, redux의 모든 것을 총괄한다.

 

 

state 함수 작성 Store 에서 state를 꺼내 반환한다.

 

// App: 이전값과 변경값이 동일하면 App 으로 안간다.
const stateToProps = state => {
  console.log('stateToProps', state.num);
  return { result: state.num };
}

 

 

💡 Dispatch

state를 바꾸기 위해서 store에 신호를 보내면 되는데 이 신호가 action 이다. dispatch 를 통해 action 을 발생시킨다. dispatch 에 action 을 넣어주지 않으면 ( => dispatch(action) ) reducer 가 동작하지 않는다.

 

dispatch 동작 : action을 action creater 가 만들어주고 action creater 를 담은 dispatcher 열차가 실행되면 해당 action 에 대한 reducer 가 실행된다.

 

const INC = 'INC'
const DEC = 'DEC'
const inc = createAction(INC);
const dec = createAction(DEC);
const dispatchToProps = dispatch => bindActionCreators({
// action 을 담고 reducer 로 향하는 dispatch 열차
    onInc: inc,
    onDec: dec
}, dispatch)

 

 

💡 Reducer (Store 의 Reducer)

Store 의 state 와 action 을 파라미터로 받아서, 해당 action 에 맞는 작업을 하여 state 를 변경한다. 이전 state 와 action 을 통해서 새로운 state 생성한다.

 

Reducer 에서 Store 로 변경된 state 값이 반환되고 저장된다.

 

const initState = {
  num: 100
}

// dispatcher 가 전달한 action 의 타입을 보고 그에 맞는 행동을 한다.
export const reducers = handleActions({
  [INC]: (state, action) => ({num: state.num+1}),
  [DEC]: (state, action) => ({num: state.num-1})
}, initState);

// reducer 에서 store 로 값이 반환된다. 
// 변경되는 num 값이 store 에 저장된다.

 

 

 

 

💡 state 와 dispatch connect 하고 export 하기

connect  : State - Dispatch - App

createStore : Store - Reducer

 

connect : React 컨테이너를 Redux 에 바인딩하기 위해 사용한다.

 

export default App = connect(
  stateToProps,
  dispatchToProps
)(App)

 

 

 

 

웹 실행 화면

 

 

 

 

 

 

 

💡 새로운 컴포넌트 실행하기 (Bpp)

 

🐥 Listener 이란?

Store 안에 있는 state (상태) 가 바뀔 때 마다 호출되는 함수이다.

 

🐥 subscribe 이란?

dispatch 가 실행될 때마다 subscribe 에 전달한 함수가 호출된다.

 

 

 

index.js 에서 listener 와 subscribe 함수 작성하기

 

const store = createStore(reducers)
const listener = () => {
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
}
store.subscribe(listener)
listener()
reportWebVitals();

 

 

App.js 작성하기

 

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { createAction, handleActions } from 'redux-actions'

class App extends Component {
  render() {
    return (
         <ConnectBpp/>
    );
  }
}

class Bpp extends Component{
  render(){
    return(
      <div>
        <h1>{this.props.result}</h1>
        <button onClick={this.props.onINC}>더하기</button>
        <button onClick={this.props.onDEC}>빼기</button> 
      </div>
    )
  }
}

const stateToProps = state => {
  console.log('stateProps', state.num)
  return { result: state.num}
}

const INC = 'INC'
const DEC = 'DEC'
const inc = createAction(INC)
const dec = createAction(DEC)
const dispatchToProps = dispatch => bindActionCreators({
  onINC: inc,
  onDEC: dec
}, dispatch, console.log('dispatcher'))

const initState = { num: 300 }
export const reducers = handleActions({
  [INC]: (state, action) => ( { num: state.num + 1 }),
  [DEC]: (state, action) => ({ num: state.num - 1 })
}, initState)

const ConnectBpp = connect(
  stateToProps,
  dispatchToProps
)(Bpp)

export default App

 

 

 

 

💡 connect 대신 Hook 사용하기

 

🐥 Hook 이란?

함수형 컴포넌트에서 상태가 변할 때 Hook 을 사용하여 상태 관리를 한다.

 

 

index.js

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

const store = createStore(reducers)
ReactDOM.render(
  <Provider store={store}> 
    <App />
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

 

import React, { Component } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createAction, handleActions } from 'redux-actions';

class App extends Component {
  render() {
    return (
      <div>
        <ConnectBpp />,
        <ConnectCpp />,
        <Dpp />
      </div>
    );
  }
}

class Cpp extends Component {
  render() {
    return (
      <div>
        <h1>확인 : {this.props.result}</h1>
      </div>
    );
  }
}

class Dpp extends Component {
  render() {
    return (
      <ConnectBpp />
    );
  }
}

class Bpp extends Component {
  render() {
    return (
      <div>
        <h1>Redux 테스트</h1>
        <h1>{this.props.result}</h1>
        <button onClick={this.props.onINC}>더하기</button>
        <button onClick={this.props.onDEC}>빼기</button>
      </div>
    );
  }
}

 

const INC = 'INC'
const DEC = 'DEC'
const inc = createAction(INC);
const dec = createAction(DEC);

const initState = {
  num: 100
}

export const reducers = handleActions({
  [INC]: (state, action) => ({ num: state.num + 1 }),
  [DEC]: (state, action) => ({ num: state.num - 1 })
}, initState);

const ConnectBpp = () => {
  const num = useSelector(state => state.num)
  const dispatch = useDispatch()
  return (
    <Bpp result={num}
      onINC={() => dispatch(inc())}
      onDEC={() => dispatch(dec())}
    />
  )
}

const ConnectCpp = () => {
  const num = useSelector(state => state.num)
  return (
    <Cpp result={num} />
  )
}

export default App

 

 

useSelector : connect 를 사용하지 않고 redux 의 state 에 접근할 수 있다.

useDispatch : 생성한 action 을 useDispatch 함수를 통해 발생시킬 수 있다.

 

 

 

웹 실행 화면