【React】React＋Reduxのミニマムサンプル

はじめに

React＋Reduxを久しぶりに触ったら色々と忘れていたので、取っ掛かりのミニマムサンプルを残しておきます。

モジュールのインストール

$ npx create-react-app redux-sample
$ yarn add redux react-redux redux-devtools redux-thunk redux-devtools-extension history react-router react-router-dom connected-react-router

ソースコード

Action

import { push } from 'connected-react-router'

export const setValue = value => dispatch => dispatch({ type: 'SET_VALUE', value });

export const changePage = path => dispatch => dispatch(push(path));
  • 値変更用の「setValue」
  • 画面遷移用の「changePage」

の2つのアクションを定義しています。

Reducer

import { combineReducers } from 'redux';

const something = (state = { value: 'initial value' }, action) => {
  switch (action.type) {
    case 'SET_VALUE':
      return Object.assign({}, state, { value: action.value });
    default:
      return state;
  }
};

export default combineReducers({ something });

「setValue」のReducerを定義しています。

Store

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { connectRouter, routerMiddleware } from 'connected-react-router';

import reducer from '../reducers';

export const history = createBrowserHistory();

const store = createStore(
  combineReducers({
    samples: reducer,
    router: connectRouter(history),
  }),
  composeWithDevTools(applyMiddleware(routerMiddleware(history), thunk)),
);

export default store

createStoreにはReducerの関数を設定します。
あと、react-routerのルーティングをReduxで管理できるように、connected-react-routerの設定をしています。

View

import React from 'react';
import './App.css';

import { useDispatch, useSelector } from 'react-redux'
import { setValue, changePage } from './actions/';

const App = (props) => {
  const samples = useSelector(state => state.samples);
  const dispatch = useDispatch();
 
  const handleClickSetValue = () => {
    dispatch(setValue('new value'));
  }

  const handleClickChangePage = () => {
    dispatch(changePage('/page'));
  }

  return (
    <div>
        <p>{samples.something.value}</p>
        <button onClick={handleClickSetValue}>値更新</button>
        <button onClick={handleClickChangePage}>画面遷移</button>
    </div>
  );
}

export default App;

未分類React

Posted by ababa