掲示板アプリの作成-3(Redux・Reducer 一覧表示)

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

前回で表示まではできたと思いますので、
このデータをReduxで管理して、表示させたいと思います。

編集ファイル名

src/store/reducers/projectReducer.js

まずはアクションに従って、状態を更新するReducerを作成します。
今回はデモデータを持たせて、このデータを一覧に表示させたいと思います。

const initState = {
	projects: [
		{id: '1', title: 'タイトル1', content: 'テキスト1', authorFirstName: '名前1', createdAt: '6/18'},
		{id: '2', title: 'タイトル2', content: 'テキスト2', authorFirstName: '名前2', createdAt: '6/18'},
		{id: '3', title: 'タイトル3', content: 'テキスト3', authorFirstName: '名前3', createdAt: '6/18'},
	]
};
const projectReducer = (state = initState, action) => {
	return state;
};

export default projectReducer;

src/store/reducers/rootReducer.js

Reducerをまとめるための rootReducer を作成します。

import projectReducer from './projectReducer';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
	project: projectReducer
});

export default rootReducer;

src/index.js

作成したrootReducerをReduxで管理するため編集します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

src/dashboard/Dashboard.js

projectReducerで作成したデモデータを呼び出して、表示させましょう。

import React, { Component } from 'react';
import ProjectList from '../projects/ProjectList';
import { connect } from 'react-redux';

class Dashboard extends Component {
	render() {
		const { projects } = this.props;
		return (
			<div className="container">
				<div className="row">
					<div className="col s12 m8">
						<ProjectList projects={projects}/>
					</div>
				</div>
			</div>
		);
	};
}

const mapStateToProps = (state) => {
	return {
		projects: state.project.projects
	}
};

export default connect(mapStateToProps)(Dashboard);

src/projects/ProjectList.js

import React from 'react';
import ProjectSummary from './ProjectSummary';

const ProjectList = ({ projects }) => {
	return (
		<div className="section">
			{ projects && projects.map(project => {
				return (
					<ProjectSummary project={project} key={project.id}/>
				)
			})}
		</div>
	);
}

export default ProjectList;

src/projects/ProjectSummary.js

import React from 'react';

const ProjectSummary = ({ project }) => {
	return (
		<div className="card">
			<div className="card-content black-text">
				<span className="card-title">{project.title}</span>
				<p>内容　：{project.content}</p>
				<p>投稿者：{project.authorFirstName}</p>
				<p>日付　：{project.createdAt}</p>
			</div>
		</div>
	);
}

export default ProjectSummary;

では、yarn start を実行して動かしてみましょう。