В ожидании Redux Action с React Hooks - PullRequest
Новая
       69

В ожидании Redux Action с React Hooks

0 голосов
/ 07 июня 2019

Я пытаюсь обработать отправку формы, чтобы показать загрузочный компонент, когда происходит выборка данных.Я хотел бы отобразить данные, когда они будут загружены в мой Redux магазин.

Прямо сейчас я настроил свой компонент для использования React перехватчиков.Пока данные загружаются в мое redux хранилище успешно, я не уверен, как «дождаться» результата выполненного действия.Вот упрощенная версия того, как выглядит мой компонент: 

const DataPage = (props) => {

    const [isLoading, setIsLoading] = useState(false);
    const [isError, setError] = useState(false);

    useEffect(() => { // Reset Filters when dataSource changes...
        setError(false);
        setIsLoading(false);
    }, [dataSource]);

    const handleSubmit = (e, { dataSource }) => {

        e.preventDefault();
        setError(false)
        setIsLoading(true);

         //// IDEALLY THIS IS WHERE THE FIX WOULD GO? TURN THIS INTO ASYNC/AWAIT?
        props.fetchData({ dataSource, token: localStorage.JWT_TOKEN });
    };

    return (    
        <div className="dataPage">
            <form className="dataPage__filters" onSubmit={(e) => handleSubmit(e, { dataSource })}>
                <DataSelector dataSource={dataSource} setDataSource={setDataSource}/>
                <button className="button">
                   Search
                </button>
            </form>
            {isError && <div>Something went wrong...</div>}
            { isLoading ? ( <div>...Loading </div> ) : (
                <div className="dataPage__table">
                    <DataTable /> // This is connected to my redux-store separately through 'connect'
                </div>
            )}
        </div>
    );
};

const mapDispatchToProps = (dispatch) => ({
    fetchData: ({ dataSource, token }) => dispatch(startFetchData({ dataSource, token }))
});

export default connect(null, mapDispatchToProps)(DataPage);

Соответствующие действия (startFetchData и setData) расположены в другом файле и выглядят так: 

export const setData = (data) => ({
    type: "SET_DATA",
    data
});

export const startFetchData = ({ dataSource, filter, filterTarget, token }) => {
    return (dispatch) => {

        axios.get(`${'http://localhost:8081'}/api/${dataSource}`, { headers: { authorization: token }})
        .then((res) => {
            dispatch(setData(result));
        });
    }
};

Я бы хотел сделать это, не вводя новые зависимости, если это возможно.

...