ReactとReduxの分かりやすい説明はないの?

  • このエントリーをはてなブックマークに追加
react-redux-article

「React、Reduxがいまいち理解できない。。」という方の為に、処理の全体像を圧倒的にどこよりも分かりやすく解説します。

一連の処理を理解することは、普段Web開発をしている方でも、苦労すると思います。実際、僕も理解して腑に落ちるまで時間がかかりました。。初学者にとって学習のハードルが高いですが、1度理解してしまえば、なんてことはないため頑張って理解していきましょう!

本記事では、処理の全体像を初学者からみた目線で解説していきます!(環境構築などは、後日アップする予定です!)

結局ReactとReuxにはどのようなものが登するの?

登場するものは以下の4つ。

  1. Store
  2. Actions
  3. Dispatch
  4. Reducer
  5. Container
  6. Components

それでは、それぞれ詳しく見ていきましょう。

1.Storeとは

アプリケーションの状態(以下State)を管理するもの。当然ながらアプリケーションには、いろいろなStateがあると思います。そのStateをまとめて1つで管理しちゃったのがStore。

2.Actionsとは

「何をする」といったプロパティを持っているもの。Storeの状態を変更したい場合は、必ずActionを発行する必要があります。発行したActionをもとにStoreで管理しているStateを更新します。

3.Dispatchとは

発行したActionをもとにStateを更新する作業のこと。Actionは「何をする」といったプロパティしか持っておらず、肝心の更新作業はできません。。従って、別で更新作業をしてくれるものが必要ですよね。それがDispatch。

4.Reducerとは

DispatchされたActionと、Storeに格納された既存のStateを受け取り、新しいStateを作成するもの。ポイントは、既存のState更新するのではなく、複製して更新します。

5.Containerとは

Componentを代表して、Reduxと繋がるComponentのこと。初期状態だとReactとReduxは関連付けされていないため、ReduxのStateなどを使用できません。そこで関連付けさせるComponentのことをContainerと言います。Componentは複数存在するため、代表して1つをReduxと連携させます。

6.Componentsとは

Viewを構成する部品のこと。ログイン画面を例にとると、ユーザー名とパスワードを入力するComponent、ログインボタンのComponent。このように1つの画面に複数のComponentが存在します。

ReactとReduxはどのように関連するの?

下記の図が一連の流れになります。図でイメージすることで、理解の深まり方が全然違うと思います。

react-redux-process

理論は分かった。さぁ、実装例を見せてくれ!

それでは、今回のメインである実装例を解説含めてご説明していきます!

ディレクリ構造

app/src/
  actions/ActionTodo.js
  components/Todo.js
  containers/Container.js
  reducers/ReducerTodo.js
  App.js
  index.js
  createStore.js

1.Storeを作成する処理を作成する

[createStore.js]

import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from 'redux';
import logger from 'redux-logger';
import { todoReducer } from './reducers/ReducerTodo';

export default function createStore() {
    // Storeを作成する。
    const store = reduxCreateStore(

        // Reducerをまとめる
        combineReducers({
            todo: todoReducer,
        }),

        // Storeを拡張する。開発期間に便利なloggerを追加している。
        applyMiddleware(
            logger,
        )
    );
    return store;
};

2.ルートコンポーネントを作成する

[App.js]

import React, { Component } from 'react';
import './App.css';
import Todo from './containers/Container';

class App extends Component {
  render() {
    return (
      <div className="App">
         // Todoコンポーネントを使用する。
         <Todo />
      </div>
    );
  }
}

export default App;

3.index.jsを作成する

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

// Storeを作成する
const store = createStore();

ReactDOM.render(
    // ラップしたコンポーネント(ここでは、Appコンポーネント)でstoreを使用できるようにする。
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
);

registerServiceWorker();
```

### 4.Actionを作成する
[actions/ActionTodo.js]
```js
export const addTodo = (todo) => {
  return {
    type: 'ADD_TODO',
    payload: { todo: todo }
  }
}

5.Containerを作成する

[container/Container.js]

import { connect } from 'react-redux';
import * as actions from '../actions/ActionTodo';
import Todo from '../components/Todo';

// stateをpropsを使用できるようにする。
const mapStateToProps = state => {
  return {
    todo: state.todo,
  }
}

// dispatchをpropsを使用できるようにする。
const mapDispathToProps = dispatch => {
  return {
    addTodo: (todo) => dispatch(actions.addTodo(todo)),
  }
}

// componentとreduxを接続する。
export default connect(mapStateToProps, mapDispathToProps)(Todo)

6.Reducerを作成する

[reducers/ReducerTodo.js]

const initialState = {
  todoList: []
};

export const todoReducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD_TODO':
       // 新しく追加するtodo
       const todo = action.payload.todo;

       // stateを複製する
       const newState = Object.assign({}, state);

       // 複製したstateに新しく追加するtodoを追加する
       newState.todoList.push(todo);

       // 新しいstateを返す
       return newState;
    default:
       return state
  }
};

6.Todoコンポーネントを作成する

[components/Todo.js]

import React from 'react'

export default class Todo extends React.Component{
  state = {
    todo: ''
  }

  render(){
    console.log(this.props);

    // storeからstateを取得する。
    const list = this.props.todo.todoList.map((todo, index) => <li key={index}>{todo}</li>)

    return(
      <div>
        // stateに入力された値をセットする。
        <input type="text" onChange={elm => this.setState({ todo: elm.target.value })} />
        // stateの更新。Actionを発行する。
        <button onClick={() => this.props.addTodo(this.state.todo)}>追加</button><br />
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}

まとめ

いかがでしたでしょうか?React、Reduxはまだまだ奥が深いため、使いこなすにはいろいろ触る必要があります。
随時更新していきますので、また見に来てください。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*