React-Redex-Firebase掲示板の作成-5(Firebaseに登録)

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

前回までの新規作成が無事コンソールに表示されましたら、
そちらの情報をFirebaseに登録してみたいと思います。

編集ファイル名

src/index.js

Firebaseと繋ぐ設定をします。
compose を使用してstoreにまとめます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './store/reducers/rootReducer';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { getFirebase, reactReduxFirebase } from 'react-redux-firebase';
import { getFirestore, reduxFirestore } from 'redux-firestore';
import fbConfig from './config/fbConfig';

const store = createStore(
	rootReducer,
	compose(
		applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
		reactReduxFirebase(fbConfig),
		reduxFirestore(fbConfig)
	)
);

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

新規作成エラーの為の定数を追加します。

export const CREATE_PROJECT = 'CREATE_PROJECT';
export const CREATE_PROJECT_ERROR = 'CREATE_PROJECT_ERROR';

src/store/action/projectActions.js

アクションの追加です。
Firebaseに情報を追加する処理を書いていきます。

import { 
	CREATE_PROJECT,
	CREATE_PROJECT_ERROR
} from './index';

export const createProject = (project) => {
	return (dispatch, getState, { getFirebase, getFirestore }) => {
		const firestore = getFirestore();
		firestore.collection('projects').add({
			...project,
			authorFirstName: 'First',
			authorLastName: 'Last',
			authorId: 12345,
			createdAt: new Date()
		}).then(() => {
			dispatch({ type: CREATE_PROJECT, project })
		}).catch((err) => {
			dispatch({ type: CREATE_PROJECT_ERROR, err })
		})
	}
};

src/store/reducers/projectReducer.js

projectAction.js で dispatchをした処理を受け取る為の準備をします。

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

const initState = {
	projects: [
		{id: '1', title: 'タイトル1', content: 'テキスト1', authorFirstName: '名前1', createdAt: '6/23'},
		{id: '2', title: 'タイトル2', content: 'テキスト2', authorFirstName: '名前2', createdAt: '6/23'},
		{id: '3', title: 'タイトル3', content: 'テキスト3', authorFirstName: '名前3', createdAt: '6/23'},
	]
};
const projectReducer = (state = initState, action) => {
	switch (action.type) {
		case CREATE_PROJECT:
			console.log('新規作成', action.project);
			return state;
		case CREATE_PROJECT_ERROR:
			console.log('新規作成エラー', action.err);
			return state;
		default:
			return state;
	}
};

export default projectReducer;