Как получить данные из firestore с помощью immutable.js и redux-действий в реагировать на натив?

Question

Я начинающий реагировать на родных. Если вы дадите мне какой-нибудь совет, это будет полезно, и я буду признателен вам.

Я пытаюсь получить данные из firestore с помощью react-native, immutable.js, react-redux, redux-actions также эти коды следуют ducks structure, Проблема в том, что я не могу получить данные от firestore потому что данные из firestore наступает после выполнения редуктора.

Даже я не уверен, смогу ли я поставить firestore метод извлечения как второй параметр createAction,

Вот мой код

---

разделяемые /index.js

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();
}

---

магазин / модули /categoryImgList

import {createAction, handleActions} from 'redux-actions';
import { Map, List } from 'immutable';

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

// Action types
const GET_NAME = 'categoryImgList/GET_NAME';

// action creator
export const getName = createAction(GET_NAME, () => {
  db.getCategoryNames().then(data => {
    const arr = [];

    data.forEach(doc => {
        console.log(doc.data().name);
        arr.push(doc.data().name);
    });

    console.log('arr');
    console.log(arr);
  })
}); // none

const initialState = Map({
    name: List()
});

// Reducer
export default handleActions({
    [GET_NAME]: (state, { payload: name }) => {
      console.log(state);
      console.log({name});
      const item = Map({ name });
      return state.update('name', name => name.push(item));
    }
}, initialState);

Спасибо вам большое!

Answer 1

Я решил эту проблему самостоятельно. Я понял, что мне нужно 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);