Как передать urlSwapi из state(redux) в fetch?

Question

[Дмитрий Ярощук]

На данный момент я передаю в fetch переменную url которая содержит ссылку для запроса. Но мне нужно получать ссылку для запроса (urlSwapi) из state и передавать ее в fetch. Проблема заключается в том что если я буду передавать в fetch получаемую ссылку(urlSwapi) из state в таком виде const urlSwapi = useSelector(swapiSelectors.link); то туда изначально будет приходить undefined, так как urlSwapi является значением из состояния, которое может обновляться после отправки формы.
App:

export default function SwapiContainer() {
    const dispatch = useDispatch();
    const urlSwapi = useSelector(swapiSelectors.link);

    const formRef = useRef(null);
    const onSubmit = (event) => {
        const url = `${formRef.current.action}${event.urlInput}`;
        dispatch(swapiActions.getLink(url));
        dispatch(swapiActions.getLoader(true))
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                console.log('response: ', response);
                return response.json();
            })
            .then(data => {
                console.log('data:',  data);
                dispatch(swapiActions.getData(data));
                dispatch(swapiActions.getLoader(false))
            })
            .catch(error => {
                console.error('Error: ', error);
                dispatch(swapiActions.getLink(undefined));
                dispatch(swapiActions.getData(undefined));
                dispatch(swapiActions.getLoader(false))
            })
    }
    return (
        <Wrapper>
            <Container>
                <InnerContainer>
                    <Title text="SWAPI"></Title>
                    <SwapiForm formRef={formRef} onSubmit={onSubmit}/>
                    <Result
                    />
                </InnerContainer>
            </Container>
        </Wrapper>
    )
}

Slice:

const swapiSlice = createSlice({
    name: 'swapi',
    initialState: {
        data: undefined,
        link: undefined,
        loader: undefined,

    },
    reducers: {
        getData: (state, action) => {
            state.data = action.payload;
            console.log('data :', state.data)
        },
        getLink: (state, action) => {
            state.link = action.payload;
            console.log('link :', state.link, typeof state.link)
        },
        getLoader: (state, action) => {
            state.loader = action.payload;
        }

    }
});
export const swapiReducers = swapiSlice.reducer;
export const swapiActions = swapiSlice.actions;

export const swapiSelectors = {
    data: state => state.swapi.data,
    link: state => state.swapi.link,
    id: state => state.swapi.link ? state.swapi.link.split('/')[5] : undefined,
    content: state => state.swapi.link ? state.swapi.link.split('/')[4] : undefined,
    loader: state => state.swapi.loader
}
console.log(swapiSlice)
console.log('swapiActions: ', swapiActions)
console.log('swapiSelectors: ',swapiSelectors)

Comments

[cocojambo1]

Скорее всего, как мне кажется, ты сначала делаешь диспатч на обновление ссылки, и потом, сразу идет вызов функции твоей.

Можешь показать где вызывается эта функция? И как?

P.s. Как вариант, ты можешь дождаться, пока диспатч пройдет, и потом уже вызывать свою функцию.