react-redux-firebaseで、pushの自動生成key(ID)を事前に取得

firebaseでpushのkeyを事前取得

firebaseの公式サイトには、key(ID)の取得は以下のように書いてあります。

// Get a key for a new Post.
var newPostKey = firebase.database().ref().child('posts').push().key;

react-redux-firebaseでも同様に、

const firebase = getFirebase();
const id = firebase.push('path/to/data').key

でkey(ID)を取得することができます。pushの第1引数にパスを指定して、第2引数は省略します。 firebase.push(‘path/to/data’)はサーバへ通信を行わないので、オフライン時にも結果がすぐに返ってきます。

firebase.push('path/to/data').keyでkey(ID)を取得した後、firebase.set(`path/to/data/${id}`,obj)を実行することで、先に取得したkey(ID)にデータを登録することができます。

keyの事前取得は、上の公式ページのように同一キーで複数のパスに書き込む場合や、以下で示すように新規作成されたデータがサーバにコミット(データが登録)されたかどうかを表示する場合に使用します。

使用例: リストに追加(新規作成)されたデータがサーバに送信中かを表示したい

タスク管理アプリにて、 pushしたデータの送信ステータスをデータごとに表示します。リストにタスクを追加すると、送信中を示す矢印を表示し、コミット(サーバへのデータ登録)が完了すると矢印を消去します。エラーが起こった場合は、警告マークを表示します。

動作イメージ↓

f:id:yucatio:20181114145054p:plain

action

actionの実装例です。

// reduxのaction
export const addTodo = (uid, text) => {  // uidはユーザID
  // redux-thunk
  return (dispatch, getState, {getFirebase}) => {
    const firebase = getFirebase();
    // key(id)の取得
    const id = firebase.push(`todos/${uid}`).key;

    // “送信中”の表示をする
    dispatch({type: ADD_TODO_REQUEST, todoId: id});
    // 取得したidでデータをセットする
    firebase.set(`todos/${uid}/${id}`,{
        completed: false,
        text,
    }).then(() => {
      // 表示をクリアする
      dispatch({type: ADD_TODO_SUCCESS, todoId: id});
    }).catch(err => {
      // エラーを表示する
      dispatch({type: ADD_TODO_ERROR, todoId: id, err});
    });
  }
}

reducer

reducerの実装例です。

const todoStatuses = (state = {}, action) => {
  switch (action.type) {
    case ADD_TODO_REQUEST:
      return { ...state, [action.todoId]:　{status : 'sending', message: '送信中'}}
    case ADD_TODO_SUCCESS:
      return { ...state, [action.todoId]:　{status : 'success'}}
    case ADD_TODO_ERROR:
      return { ...state, [action.todoId]:　{status : 'error', message: 'エラーが発生しました。時間をおいて再度お試しください。'}}
    default:
      return state
  }
}

export default todoStatuses