如何使用immutable.js和redux-actions在react native中从firestore获取数据?

时间:2018-06-15 23:59:39

标签: react-native react-redux immutable.js redux-actions

我是反应原生的初学者。如果你给我任何建议,这将有所帮助,我将不胜感激。

我尝试使用firestorereact-nativeimmutable.jsreact-reduxredux-actions获取数据,此代码也遵循{{1} }。 问题是我无法从ducks structure获取任何数据,因为来自firestore的数据在执行reducer之后出现。

即便如此,我也不确定是否可以将firestore抓取方法作为firestore的第二个参数。

这是我的代码。

共享/ index.js

createAction

商品/模块/ categoryImgList

import firebase from 'firebase/app';
import 'firebase/firestore'
import 'firebase/storage'

const config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "..."
};

firebase.initializeApp(config);
const db = firebase.firestore();
const storage = firebase.storage();

export const getCategoryNames = () => {
  return db.collection('categories').get();
}

非常感谢你!

1 个答案:

答案 0 :(得分:0)

我自己解决了这个问题。 我意识到我需要redux-thunk来获取异步数据。 我安装了redux-thunk并更改了一些代码,如下所示。

import {handleActions} from 'redux-actions';

// firestore
import * as db from '../../shared';

// Action types
const GET_CATEGORY_NAME_PENDING = 'categoryImgList/GET_CATEGORY_NAME_PENDING';
const GET_CATEGORY_NAME_SUCCESS = 'categoryImgList/GET_CATEGORY_NAME_SUCCESS';
const GET_CATEGORY_NAME_FAILURE = 'categoryImgList/GET_CATEGORY_NAME_FAILURE';

// action creator
export const getName = () => async (dispatch) => {
  dispatch({type: GET_CATEGORY_NAME_PENDING});
  try {
    const response = await db.getCategoryNames();

    const arr = [];
    response.docs.forEach(res => {
        arr.push(res.id);
    });
    console.log(arr);

    dispatch({type: GET_CATEGORY_NAME_SUCCESS, payload: arr});
    return arr;
  } catch (e) {
      console.log(e);
      dispatch({type: GET_CATEGORY_NAME_FAILURE, payload: e});
  }
}

const initialState = {
  fetching: false,
  error: false,
  name: []
};

// Reducer
export default handleActions({
  [GET_CATEGORY_NAME_PENDING]: (state) => ({ ...state, fetching: true, error: false }),
  [GET_CATEGORY_NAME_SUCCESS]: (state, action) => ({ ...state, fetching: false, name: action.payload }),
  [GET_CATEGORY_NAME_FAILURE]: (state) => ({ ...state, fetching: false, error: true })
}, initialState);