React + Reduxでメモアプリを作成(表示②)

2020年6月5日2021年1月24日

準備①からの続きをしていきたいと思います。
https://kazunaka.com/react-redux-memoapp-one/

ファイルを編集

ディレクトリ「src」以下のファイルを編集していきます。

actions/index.jsを編集していきます。
メモのアクションを書いていきます。
まずは表示ができるようになるとこまでいきたいと思います。

// アクション定義
export const READ_MEMOS = "READ_MEMOS";

// 一覧取得
export const getMemos = () => ({
	type: READ_MEMOS,
});

続いて、reducers/index.jsを編集していきます。

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import memos from './memo';

export default combineReducers({ memos, form });

次は、reducers/memo.jsを編集します。

import {
	READ_MEMOS,
} from '../actions';

export default (memos = {}, action) => {
	switch (action.type) {
		case READ_MEMOS:
			return memos;
		default:
			return memos;
	}
};

続いて、index.jsの編集です。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { Switch, BrowserRouter, Route } from 'react-router-dom';

import reducer from './reducers';
import MemoIndex from './components/memoIndex';
import reportWebVitals from './reportWebVitals';

const store = createStore(reducer);

ReactDOM.render(
	<Provider store={store}>
		<BrowserRouter>
			<Switch>
				<Route exact path='/' component={MemoIndex} />
			</Switch>
		</BrowserRouter>
	</Provider>,
	document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

次にcomponents/memoIndex.jsの編集です。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { getMemos } from '../actions';
import _ from 'lodash';

class MemoIndex extends Component {
	render() {
		return (
			<React.Fragment>
				<table>
					<thead>
						<tr>
							<th>タイトル</th>
							<th>メモ</th>
						</tr>
					</thead>
				</table>
			</React.Fragment>
		)
	}
};

const mapStateToProps = state => ({ memos: state.memos });
const mapDispatchToProps = ({ getMemos });
export default connect(mapStateToProps, mapDispatchToProps)(MemoIndex);