React Reduxを簡単に利用してみる

Reduxを人に説明する簡単なコンテンツ作らなきゃと思っていたところ大変良い記事を発見したので、それを参考に自分の目的にあった形にアレンジさせていただきました。

thunkを利用したAPIリクエストやコンポーネント間での共有についての続編も書きました。

参考サイト

シンプルなReduxサンプルが無く困っていまいたが、大変参考になりました。ありがとうございます。

• https://qiita.com/loverails/items/8c46767413a3c8d15f00

準備

参考サイトさんではreact nativeを利用されていますが、普通のcreate-react-appでやってみます。

create-react-app redux_test
cd redux_test

npm install --save redux react-redux

実装

直下にmyRedux.jsファイルを作成し、以下の記述をします。
変数の依存関係がわかりやすいようにあえて変数名を場所により変えております。

myRedux.js

import {combineReducers, createStore } from 'redux';


//actions

export const editName = _name => ({
    type: "EDIT_NAME",
    name: _name
});

export const deleteName = () => ({
    type: "DELETE_NAME",
    name: ''
});

//reducers

//reducerの_userと命名
export const _user = (state = {}, action) => {
    switch (action.type){
        case 'EDIT_NAME':
            return action.name;
        case 'DELETE_NAME':
            return action.name;
        default:
            return state;
    }
}

//keyを指定して別名(user)で参照可能にしました（keyを指定しないと_userとなる） 。
export const reducers = combineReducers({
    user: _user,
});


//store

//値は以下の構造となる。
const initialState = {
    user: {
        name: 'foo'
    }
};

export const store = createStore(reducers,initialState);

App.jsはそのまま上書きして利用します。

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { editName, deleteName } from './myRredux'


class App extends Component {
  render() {
    return (
      <div className="App">
        {/* USER.name等で参照可 */}
        <h3>{this.props.USER.name}</h3>
        <button onClick={() => this.props.editName({name: 'my name is hoge.'})}>Add</button>
        <button onClick={() => this.props.deleteName()}>Del</button>
      </div>
    );
  }
}

//combineで付けたkey名でマッピング（props.USERにマップ）
const mapStateToProps = state => ({
  USER: state.user
});

//dispatchはそのまま
//props.addName()にマップ
const mapDispatchToProps = {
  editName,deleteName
}

//バインドさえれたAppが返る
export default connect(mapStateToProps,mapDispatchToProps)(App);
// export default App;

index.jsは<Provider>を追加するだけ。

index.js

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


import { Provider } from 'react-redux'
import { store } from './redux'

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

動作確認。

npm start