React-Redex-Firebase掲示板の作成-4(ローカル新規作成)

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

前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。

編集ファイル名

src/index.js

thunkはstoreのdispatchメソッドを受け取り、
Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、
通常の同期処理をディスパッチするために利用します。

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

const store = createStore(
	rootReducer,
	applyMiddleware(thunk)
);

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/store/actions/index.js

新規作成のための定数宣言。

export const CREATE_PROJECT = 'CREATE_PROJECT';

src/store/actions/projectAction.js

アクションクリエイターの作成。

import { CREATE_PROJECT } from './index';

export const createProject = (project) => {
	return (dispatch, getState) => {
		dispatch({ type: CREATE_PROJECT, project})
	}
};

src/components/layout/SigneInLinks.js

画面側から入れるようにするためのリンクの作成。
いつかログイン機能をつけるためログインしていないと
表示ができないようにするためのファイルになる。

import React from 'react';
import { NavLink } from 'react-router-dom';

const SignedInLinks = () => {
	return (
		<ul className="right">
			<li><NavLink to="/create">新規作成</NavLink></li>
		</ul>
	)
};

export default SignedInLinks;

src/components/layout/Navbar.js

作成したSignedInLinksを呼び出す。

import React from 'react';
import { Link } from 'react-router-dom';
import SignedInLinks from './SignedInLinks';

const Navbar = () => {
	return (
		<nav className="nav-wrapper black">
			<div className="container">
				<Link to="/">掲示板アプリ</Link>
				<SignedInLinks />
			</div>
		</nav>
	);
}

export default Navbar;

src/components/projects/CreateProject.js

新規作成のための画面作り。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createProject } from '../../store/actions/projectActions'

class CreateProject extends Component {
	state = {
		title: '',
		content: ''
	}
	handleChange = (event) => {
		this.setState({
			[event.target.id]: event.target.value
		})
	}
	handleSubmit = (event) => {
		event.preventDefault()
		this.props.createProject(this.state)
	}
	render() {
		return (
			<div className="container">
				<form onSubmit={this.handleSubmit} className="white">
					<h5>新規作成</h5>
					<div className="input-field">
						<label htmlFor="title">タイトル</label>
						<input type="text" id="title" onChange={this.handleChange} />
					</div>
					<div className="input-field">
						<label htmlFor="content">内容</label>
						<input type="text" id="content" onChange={this.handleChange} />
					</div>
					<button className="btn grey">作成</button>
				</form>
			</div>
		);
	};
}

const mapDispatchToProps = (dispatch) => {
	return {
		createProject: (project) => dispatch(createProject(project))
	}
};

export default connect(null, mapDispatchToProps)(CreateProject);

src/store/reducers/projectReducer.js

actionを受け取るためのReducdr。

import { CREATE_PROJECT } from '../actions';

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) => {
	switch (action.type) {
		case CREATE_PROJECT:
			console.log('新規作成', action.project);
			return state;
		default:
			return state;
	}
};

export default projectReducer;

src/App.js

path 「/create」が呼ばれたら、
CreateProjectが呼びだされるようにする。

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Dashboard from './components/dashboard/Dashboard';
import CreateProject from './components/projects/CreateProject';

class App extends Component {
	render() {
		return (
			<BrowserRouter>
				<div>
					<Navbar/>
					<Switch>
						<Route exact path="/" component={Dashboard} />
						<Route path="/create" component={CreateProject} />
					</Switch>
				</div>
			</BrowserRouter>
		);
	};
}

export default App;

yarn start で実行して、新規作成の動作を見たいと思います。
タイトルと内容を入力して作成を押してみてください。

無事コンソールにて表示されたら成功です。
※F12で開発者ツールを開いています。
※Warning出てますが気にしないでください。

通常であれば一覧表示に画面を戻すのですが、
ここではその処理は入れていませんので、
コンソールに表示が出来たらOKです。