이론 그 곳에서, 우선 간단한 앱을 만들어 보겠습니다.

이번에 만드는 것

무슨 일이없는, 단지 카운트 앱입니다 ↓

주의점

단지 모사해 가는 일로 「아, 어쩐지 쓸 수 있을지도」라고 생각하는 것이 목적입니다.
이론등의 설명은 하기 링크군이 매우 참고가 되었습니다.

Redux 입문【다이제스트판】10분에 이해하는 Redux의 기초

자꾸 React with Redux 자습서

React+Redux 입문

전혀 잡고 있지 않은 분은, 이것들을 보고 나서 써 보면 알기 쉽다고 생각합니다.

개발 환경

카테고리
버전 　


OS
macOS Mojave 10.14.4

Node.js
10.15.3

Yarn
1.13.0

React
16.8.6

Redux
4.0.1

모사 준비

개발 환경 구축

Node.js, Yarn 설치

여기에 대한 설명은 생략합니다.
모르는 사람은 이 Qiita가 간절히 정중합니다.

nodebrew, npm, yarn 등 Node.js 관련을 자꾸 배우면서 설치 【초학자용】

create-react-app 설치

Facebook사가 만들어 주신 「create-react-app」라는 병아리를 다운로드합니다.

$ yarn global add create-react-app

※"./path/to/applciation"の部分で作成するアプリケーションへのパスを指定
$ create-react-app ./path/to/application

이러한 React 자신과 그 밖의 여러 라이브러리를 정리해, 병아리를 작성해 주는 툴을 「boilerplate」라고 말합니다.

다양한 종류가 있으므로, 신경이 쓰이는 분은 이쪽을 참고로.

React 초보자에게 추천하는 최신 보일러 플레이트 11선

실제로 병아리가 작성되어 아래와 같은 폴더 파일군이 생성됩니다↓

.
├── README.md
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

우선 시작해 봅시다. React 로고가 브라우저에 표시되면 성공합니다.

$ yarn start

Redux, react-redux 설치

덧붙여서 react-redux는 React와 Redux의 중개역을 담당하는 모듈입니다.

$ yarn add redux react-redux

이제 개발 환경을 구축할 수 있었습니다.

파일 구성 조정

src 디렉토리의 부하를 이런 식으로 해 둡시다.
미리 폴더나 파일을 만들어 가는 것으로, 모사가 편해집니다.

├── App.css
├── App.test.js
├── actions
│   └── index.js
├── components
│   └── App.js
├── index.js
├── reducers
│   ├── count.js
│   └── index.js
└── serviceWorker.js

렛츠 모사!

Action 정의

store에 메시지를 보내는 Action을 정의합니다.

카운트 앱은 '+'와 '-'버튼으로 상태를 변경하기만 하면 되므로, 필요한 액션은 2개만이 됩니다.

acitons/index.js

export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

// 書き方が2通りありますが、どちらでも問題ないです
export const increment = () => {
  return {
    type: INCREMENT
  }
}

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

Reducer 구현

store에서 보낸 정보를 바탕으로 state를 실제로 변경하는 "Reducer"를 구현합시다.

index.js 구현

Reducer 그룹을 관리하는 index.js를 구현합니다.

이번에 생성하는 앱은 하나의 Reducer만 가지고 있으므로 count.js와 분리할 필요가 없습니다.
다만, 규모가 큰 앱의 경우는 필요하므로, 향후를 위해서도 해 둡시다.

reducers/index.js

import { combineReducers } from 'redux'
import count from './count'

export default combineReducers(({ count }))

count.js 구현

카운터의 숫자를 변경하는 부분입니다.
store로부터 보내지는 정보 중의 action.type 에 의해, 숫자를 늘릴까 줄일까를 결정하고 있습니다.

reducers/count.js

import { INCREMENT, DECREMENT } from '../actions'

//コンポーネントの初期値を設定
const initialState = { value: 0 }

export default (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { value: state.value + 1 }
    case DECREMENT:
      return { value: state.value - 1 }
    default:
      return state
  }
}

store 구현

구현된 Reducer를 기반으로 store를 작성합니다.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import reducer from './reducers'
import App from './components'
import * as serviceWorker from './serviceWorker'

// 作成されたReducerをもとにstoreを作成
// アプリケーション内部の全てのstateは、このstateに集約される
const store = createStore(reducer)

// Providerによって、storeがどのコンポーネントからも参照できるようになる
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

구성 요소 구현

index.js 에서 호출하는 "App"컴포넌트를 구현하자.

components/App.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { increment, decrement } from '../actions'

class App extends Component {
  render() {
    const props = this.props
    return (
      <React.Fragment>
        <div>count:{props.value}</div>
        <button onClick={props.increment}>+</button>
        <button onClick={props.decrement}>-</button>
      </React.Fragment>
    );
  }
}

// stateから必要な情報をコンポーネントにマッピングする関数
const mapStateToProps = state => ({ value: state.count.value })

// dispatch関数をコンポーネントにマッピングする関数
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})

// こんな書き方もある↓
// const mapDispatchToProps = ({ increment, decrement })

// stateとacitonをコンポーネントに関連づける
export default connect(mapStateToProps, mapDispatchToProps)(App)

다음은...

TODO 목록이나 Ajax 통신을 구현해 보면 좋을지도 모릅니다.

【React】ToDo 앱을 만들어 보자 【전편】

React + Redux에서 REST API를 두드리고 나열하는 방법