React-Redux Rails API: Page Not Updating On It's Own - asynchronous

Question

I'm currently working on a react-redux project with a rails API in the back end and am having some issues. So I currently have an update method in the back end for my edit functionality in the front end. For the most part, it seems to work fine, it updates the back end when edited but it won't render the updated object in the front end until manually refresh the page.
I'm thinking this has something to do with my async function but I can't figure it out.
Thank you!
Here are my actions:
return (dispatch) => {
fetch(`http://localhost:3000/haikus`)
.then(res => res.json())
.then(haikus => {
dispatch({type: "FETCH_HAIKUS", payload: haikus})
})
}
}
export function addHaiku(haiku){
return (dispatch) => {
const options = {
method: "POST",
headers: {
"Content-type": "application/json",
"accept": "application/json"
},
body: JSON.stringify({haiku})
}
fetch(`http://localhost:3000/haikus`, options)
.then(res => res.json())
.then(haiku => {
dispatch({type: "ADD_HAIKU", payload: haiku})
})
}
}
export function editHaiku(haiku){
// debugger
return (dispatch) => {
const options = {
method: "PATCH",
headers: {
"Content-type": "application/json",
"accept": "application/json"
},
body: JSON.stringify({haiku})
}
fetch(`http://localhost:3000/haikus/${haiku.id}`, options)
.then(res => res.json())
.then(haiku => {
dispatch({type: "EDIT_HAIKU", payload: haiku})
// dispatch({type: "EDIT_HAIKU", payload: haiku.data})
})
}
}
export function deleteHaiku(haikuId){
return (dispatch) => {
const options = {
method: "DELETE"
}
fetch(`http://localhost:3000/haikus/${haikuId}`, options)
.then(res => res.json())
.then(message => {
dispatch({type: "DELETE_LIST", payload: haikuId})
})
}
}```
Here is my reducer:
```export default function haikuReducer(state, action){
// debugger
switch(action.type){
case "FETCH_HAIKUS":
return {
haikus: action.payload
}
case "ADD_HAIKU":
return {
haikus: [...state.haikus, action.payload]
}
case "DELETE_HAIKU":
const newHaiku = state.haikus.filter(haiku => haiku.id !== action.payload)
return {
haikus: newHaiku
}
case "EDIT_HAIKU":
// debugger
// const editHaiku = state.haikus.map(haiku => haiku.id === action.payload.id ? action.payload : haiku)
const editHaiku = state.haikus.map(haiku => haiku.id === parseInt(action.payload.id) ? action.payload : haiku)
return {
haikus: editHaiku
}
default:
return state
}
}```
Here is my form component:
```import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { addHaiku } from './actions/haikuActions'
import { editHaiku } from './actions/haikuActions'
class HaikuForm extends Component {
// Normally do not set state directly to props
constructor(props){
super(props)
this.state = {
id: this.props.haiku ? this.props.haiku.id : "",
title: this.props.haiku ? this.props.haiku.title : "",
haiku: this.props.haiku ? this.props.haiku.haiku : "",
genre: this.props.haiku ? this.props.haiku.genre : ""
}
}
handleSubmit(event) {
event.preventDefault()
if(!this.props.haiku){
this.props.addHaiku(this.state)
} else {
this.props.editHaiku(this.state)
}
this.setState({ title: "", haiku: "", genre: "" ,id: "" })
this.props.history.push('/haikus')
}
handleChange(event){
this.setState({
[event.target.name]: event.target.value
})
}
redirectOrRenderForm = () => {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" onChange={(event) => this.handleChange(event)} value={this.state.title} name="title"/><br></br>
<input type="text" onChange={(event) => this.handleChange(event)} value={this.state.haiku} name="haiku"/><br></br>
<input type="text" onChange={(event) => this.handleChange(event)} value={this.state.genre} name="genre"/>
<input type="submit"/>
</form>
)
}
render(){
return (
<>
{this.redirectOrRenderForm()}
</>
)
}
}
export default withRouter(connect(null, { addHaiku, editHaiku })(HaikuForm))```