Всем привет !

У меня проблемы с redux и firebase. Обязательно ли ставить роутеры в корневые компоненты проектов?

Некоторые из моих очень хорошо работают с этой системой, но не с функциями asynchronous, в основном с функциями firebase.

Этот пост в основном о том, как и где разместить firebase.[objects], чтобы они всегда читались правильно. Официальная документация не очень ясна и понятна.

Напоминаю Я новичок в firebase.

Я попытался разместить их в функциях цикла реакции (например, componentDidMount(), ...) с момента некоторого срабатывания после рендеринга, но ничего не вышло.

По сути, я так и сделал:

Service.jsx

function getAll() {
    // I had saved some values in the localStorage
    const uid = JSON.parse(localStorage.getItem('user')).uid;

    // Here the reference to appropriate child in the database
    const dbRef = firebase.database().ref().child('events');

    // Choosing the user with appropriate's is
    const userRef = dbRef.child(uid);

    // An array to save fetched values
    let answer = [];

    // Created a listener
    userRef.on('value', snap => {
        let rx = snap.val();
        for (let item in snap.val()) {
            answer.push(rx[ item ]);
        }

        // Return a promise for the actions
        return Promise.resolve({
            events: answer
        });
    });

    return Promise.resolve({
        events: answer
    });

}

Reducer.jsx

export function events(state = { events: [] }, action) {
    //    --------> Get all
    case eventConstants.GET_ALL_REQUEST:
        return {
            ...state,
            managingEvent: true,
        };
    case eventConstants.GET_ALL_SUCCESS:
        return {
            ...state,
            events: action.events
        };
    case eventConstants.GET_ALL_FAILURE:
        return state;
    default:
        return state
    }
}

Action.jsx

function getAll() {
    return dispatch => {
        dispatch(request());

        eventService.getAll()
            .then(
                ans => {
                    dispatch(success(ans.events));
                },
                error => {
                    dispatch(failure(error));
                    dispatch(alertActions.error(error));
                }
            );
    };

    function request() {
        return { type: eventConstants.GET_ALL_REQUEST }
    }

    function success(events) {
        return { type: eventConstants.GET_ALL_SUCCESS, events }
    }

    function failure(error) {
        return { type: eventConstants.GET_ALL_FAILURE, error }
    }
}

Гроб:

Вот что я сделал. Теперь вот что я пытаюсь сделать: получить данные с помощью store.dispatch(Action.getAll()), потому что я использую эти данные в компоненте поиска. Я использую их так:

Search

// usual imports here, connect inculed
import React, { Component } from 'react';
import { connect } from 'react-redux';

class SearchPage extends Component {

    // So I first used the constructor
    constructor(props){
        this.props.dispatch(Action.getAll());
    }

    componentDidMount() {
        // Then here... an same for all others methods of react lifecycle
        this.props.dispatch(Action.getAll());
    }

    render() {

    // TODO Don't forget the translation
    let { translate, events } = this.props;

    ....

    const table = (
        <Table hover>
            {tableHeader}
            <tbody>
            {events.map(item =>
                <tr key = {item.key}>
                    <th scope = "row">{item.key}</th>
                    <td>{item.name}</td>
                    <td>{item.startDate}</td>
                    <td>{item.endDate}</td>
                </tr>
            )}
            </tbody>
        </Table>
    );
...
}


const mapStateToProps = (state) => {
    const { events } = state.events;
    const translate = getTranslate(state.locale);
    return {
        events,
        translate,
    };
}

const connectedPage = connect(mapStateToProps)(SearchPage);
export { connectedPage as SearchPage };

Метки:

Иногда это работало со штрафом, затем, когда я обновлял базу данных в Интернете, а затем она перерисовывалась, он говорил, что event был нулевым или неопределенным, что я мог понять из-за перехода в Reducer.js.

But what should I do now ? теперь мой вопрос.

Спасибо, что прочитали этот текст, и спасибо за вашу помощь.

:)