У меня есть приложение с подключенным firebase. Я могу на каждом шаге вести консольный журнал и видеть, как данные из firebase передаются, однако, когда я на уровне компонента, он всегда возвращается пустым.
import * as firebase from "firebase";
import { GET_LIST } from './types';
export const getListThunk = () => {
return (dispatch) => {
const teams = [];
const teamsObj = {};
var that = this;
var ref = firebase.database().ref('SignUp/' + "577545cf-c266-4b2e-9a7d-d24e7f8e23a5");
//var query = ref.orderByChild("uuid");
console.log("uuid thunk ");
ref.on('value', function (snapshot) {
console.log("snap ", snapshot.val())
snapshot.forEach(function (child) {
let currentlike = child.val()
console.log("schedas ", currentlike)
teams.push(currentlike);
console.log("teams ",teams);
});
dispatch({ type: GET_LIST, payload: teams})
})
}
}
При всем консольном журнале здесь я могу получить информацию из firebase. На консоли отображается:
Теперь я проверил мой редуктор, чтобы увидеть, могу ли я увидеть там свою информацию.
import { GET_LIST } from '../actions/types';
const INITIAL_STATE = {
jello: 'hello'
};
const listReducer = (state = INITIAL_STATE, action) => {
switch (action.type){
case GET_LIST:
console.log("action ", action.payload);
return action.payload;
default:
console.log("default ");
return state;
}
};
export default listReducer;
Это действие, помеченное в журнале консоли, также показывает полезную нагрузку
Итак, я снова могу видеть данные в полезной нагрузке редуктора.
Теперь, проверяя мой компонент, я бы предположил, что вызов this.props снова отобразит данные, но они будут пустыми
Компонент:
mport React, { Component } from "react";
import {
View,
StyleSheet,
Button,
SafeAreaView,
ScrollView,
Image,
TouchableOpacity,
Alert,
Animated,
FlatList
} from "react-native";
import {connect} from 'react-redux';
import { getListThunk } from '../actions';
import Form from '../components/Form';
import firebase from "firebase";
import * as theme from '../theme';
import Block from '../components/Block';
import Text from '../components/Text';
import App from "../../App";
class RenderRequests extends Component {
constructor(props) {
super(props);
this.params = this.props;
uuid2 = this.props.uuid;
}
componentWillMount(){
this.props.getListThunk();
}
componentDidMount(){
console.log("did mount " , this.params.uuid)
var uuid = this.params.uuid;
//this.props.getListThunk({uuid});
}
render() {
console.log("Component level array " ,this.props)
return (
<View>
<Text> {this.params.uuid} </Text>
</View>
);
}
}
export default connect(null, { getListThunk })(RenderRequests);
Теперь при входе в консоль отображается пустой массив:
ПРИМЕЧАНИЕ. UUID в этом файле журнала - это UUID, который я передал в качестве опоры с предыдущего экрана. Как вы можете видеть, getListThunk пуст.
-------- РЕДАКТИРОВАТЬ ------------------------ Я добавил код, основанный на том, что Виниций Клев сказал. Однако мне пришлось сделать это {list: state} вместо {list: state.listReducer}
Теперь я вижу это в своей консоли. Тем не менее, кажется, что он появляется, затем выполняет действие по умолчанию, и мое состояние сбрасывается в ничто. Ниже приведен скриншот моей консоли:
Если вы видите мой код редуктора, я регистрируюсь, когда вызывается действие по умолчанию. Почему он вызывается так много раз после того, как вызывается начальное действие 'GET_LIST'. Это продолжает заменять мое состояние состоянием по умолчанию.