如何在将 createPost 操作发送到减速器后从后端 API 生成新创建的帖子 ID

Question

I can't figure out how to get new post id after dispatch the post object to reducer through middleware thunk. If could get new post id, I want to redirect to new post page by history.push( /${newPost_id} ). my code is:

backend controller:

export const addFilm = async (req, res) => {
    const film = req.body
    try {
        const newFilm = new Film(film)
        console.log(newFilm)
        await newFilm.save()
        res.status(201).json(newFilm)
    } catch (error) {
        res.status(409).json({message: error.message})
    }
}

frontend event handleSubmit:

const handleSubmit = (e) => {
        e.preventDefault()
        dispatch(addFilm(filmData))
        history.push(`/${newPost_id}`)//how to implement this?
      }
  }

actions:

Answer 1

I'm going to assume that your backend returns a complete film object which has the id property added to it.

The redux-thunk middleware changes the behavior of dispatch such that it returns the value that was returned from your thunk. You will want to design your addFilm thunk such that it dispatches the correct actions and also returns the newFilm that it got from the backend.

Then you can modify your handler like so:

const handleSubmit = async (e) => {
    e.preventDefault();
    const newFilm = await dispatch(addFilm(filmData));
    history.push(`/${newFilm.id}`);
}

Thunk Docs