Как передать диспетчерскую функцию из массива маршрутизации в компонент? - PullRequest
Новая
       39

Как передать диспетчерскую функцию из массива маршрутизации в компонент?

0 голосов
/ 09 июля 2019

Я пытаюсь отобразить маршруты из массива с предопределенными функциями (асинхронные вызовы через thunk) и связать их с диспетчеризацией, чтобы получать данные из API каждый раз, когда я направляюсь на эту страницу. Когда я передаю func в качестве аргумента для массива зависимостей useEffect, я получаю бесконечный цикл, поэтому я уверен, что на этом пути я допустил некоторые ошибки.

Массив маршрутизации 

export const routes = [
    {
        path: '/',
        component: Notes,
        fetchInitialData: () => fetchGetNotes()
    }]

вызов API через thunk 

export const fetchGetNotes = () => {
    return (dispatch) => {
        return axios.get('/url')
            .then(response => {
                dispatch(getNotes(response.data));
          })
    };
};

Маршрутизация 

<Switch>
   {routes.map(({ path, component: C, fetchInitialData }) => (
                        <Route path={path} exact key={path}
                            render={(props) => <C {...props}
                                func={() => getNotes(fetchInitialData, location.search.match(/\b[\w-]+$/))} />}
                        />
                    ))}
</Switch>

Отправка 

const mapDispatchToProps = (dispatch) => {
    return {
        getNotes: (fetchInitialData, params) => {
            dispatch(fetchInitialData(params));
        }
    }
}

Использовать эффект внутри компонента Notes 

     useEffect(() => {
        func()
    }, [])
...