Javascript 如何修复：错误：操作必须是普通对象。将自定义中间件用于异步操作。？

我正在制作ReactApp，当我试图在输入中写入一些内容时，我出现了这个错误，我不知道如何解决这个问题。。。有人能帮我吗？并向我解释了在这种情况下如何进行正确的调度

---

API请求

export const searchWeather = value => {
    Axios.get(`${API.base}weather?q=${value}&units=metric&APPID=${API.key}`)
    .then(res => res.json())
    .then(response => {
        console.log(response)
    })
}

const NavBar = ({cityValue,getCityValue,getCurrentWeather}) => {

    return(
        <div className="row">
            <div className='col-lg-4 nav-bar-mobile' >
                <ul>
                    <li >Home</li>
                    <li>Weather</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div className='col-lg-8 search-bar'>
                <input onKeyPress={getCurrentWeather} value={cityValue} onChange={e => getCityValue(e.target.value)} placeholder='Search Location...'/>
            </div>
            <div className='col-lg-4 nav-bar' >
                <ul>
                    <li >Home</li>
                    <li>Weather</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    )
}

减速器

export const getCurrentWeather = () => {
    return (dispatch) => {
        let value = initialState.cityValue

        dispatch(loader(true))
        dispatch(searchWeather(value))
        dispatch(loader(false))
    } 
}

class NavContainer extends React.Component {
    componentDidMount(){
        getCurrentWeather()
    }

    render(){
        return (
            <NavBar {...this.props} />
        )
    }
}

const mapStateToProps = state => ({
    cityValue: state.weatherReducer.cityValue
})

export default connect(mapStateToProps, {getCityValue,getCurrentWeather})(NavContainer)

容器

export const getCurrentWeather = () => {
    return (dispatch) => {
        let value = initialState.cityValue

        dispatch(loader(true))
        dispatch(searchWeather(value))
        dispatch(loader(false))
    } 
}

class NavContainer extends React.Component {
    componentDidMount(){
        getCurrentWeather()
    }

    render(){
        return (
            <NavBar {...this.props} />
        )
    }
}

const mapStateToProps = state => ({
    cityValue: state.weatherReducer.cityValue
})

export default connect(mapStateToProps, {getCityValue,getCurrentWeather})(NavContainer)

类NavContainer扩展React.Component{
componentDidMount（）{
getCurrentWeather（）
}
render（）{
返回(
)
}
}
常量mapStateToProps=状态=>({
cityValue:state.weatherReducer.cityValue
})
导出默认连接（MapStateTops，{getCityValue，getCurrentWeather}）（NavContainer）

组件

export const searchWeather = value => {
    Axios.get(`${API.base}weather?q=${value}&units=metric&APPID=${API.key}`)
    .then(res => res.json())
    .then(response => {
        console.log(response)
    })
}

const NavBar = ({cityValue,getCityValue,getCurrentWeather}) => {

    return(
        <div className="row">
            <div className='col-lg-4 nav-bar-mobile' >
                <ul>
                    <li >Home</li>
                    <li>Weather</li>
                    <li>Contact</li>
                </ul>
            </div>
            <div className='col-lg-8 search-bar'>
                <input onKeyPress={getCurrentWeather} value={cityValue} onChange={e => getCityValue(e.target.value)} placeholder='Search Location...'/>
            </div>
            <div className='col-lg-4 nav-bar' >
                <ul>
                    <li >Home</li>
                    <li>Weather</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>
    )
}

const导航栏=（{cityValue，getCityValue，getCurrentWeather}）=>{
返回(

家
天气
接触

getCityValue（e.target.value）}占位符='搜索位置…'/>

家
天气
接触

)
}

您应该使用一些中间件，例如redux thunk。您应该创建thunk的外观

const searchWeather = data => dispatch => {
    searchWeatherAxiosRequest(data)}

然后在手柄上使用此thunk-in组件单击：

 searchWeather()

---

你也不应该在减速机里派东西。Reducer只需更改状态

Redux本身不能处理异步操作，它需要一些中间件。退房看起来你也混淆了动作/减速器的定义，减速器是形状的纯函数

（状态，动作）=>状态

@drewrese 1）我已经完成了redux thunk 2）我不完全明白我混淆了什么。。我可以添加减速器组件，如果你需要看到它。。。