React redux 不更新全局狀態

Question

我正在使用沒有鈎子的 Redux，並且所有這些似乎都完美地結合在一起，但是當我查看瀏覽器控制台 Redux 窗口時，我的狀態沒有改變。 所以基本上我有一個看起來像這樣的商店文件

import {createStore, applyMiddleware} from "redux";

import thunk from 'redux-thunk'
import {composeWithDevTools} from "redux-devtools-extension/developmentOnly";
import rootReducer from './reducers'

const middleware = [thunk]
const initialState = {}

const store = createStore(rootReducer, initialState,composeWithDevTools(applyMiddleware(...middleware)))

export default store

然后我有我的全局減速器文件

import {combineReducers} from "redux";
import searchReducer from './searchReducer'

export default combineReducers({
    books: searchReducer
})

和 searchReducers 文件

import {SEARCH_BOOK, SET_INDEX,FETCH_BOOKS} from "../actions/types";

const initialState = {
    query: '',
    books: [],
    loading: false,
    book: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case 'SEARCH_BOOK':
            return {
                ...state,
                query:action.payload,
                loading: false
            }
        case 'SET_INDEX':
            return {
                ...state,
                index:action.payload,
                loading: false
            }
        case 'FETCH_BOOKS':
            return {
                ...state,
                index:state.index+40,
                books:state.books.concat(action.payload),
                loading: false
            }
        default:
            return state
    }
}

現在我只有你在這里看到的動作類型是那個動作

import {SEARCH_BOOK} from "./types";

export const searchBook = query => dispatch => {
    dispatch ({
        type:SEARCH_BOOK,
        payload:query
    })
}
export const fetchBooks = (query,index) => {
    console.log(query)
    axios
        .get(`https://www.googleapis.com/books/v1/volumes?q=${query}&maxResults=40&orderBy=relevance&startIndex=${index}`)
        .then(response =>{
            return({
                type: FETCH_BOOKS,
                payload: response.data.items
            })}
        )
        .catch(err => console.log(err));
};

所有這些都在應用程序中捆綁在一起，我在其中導入了包裝所有內容的提供程序。 問題來了。 我有一個搜索表單，應該在更改時更新全局狀態的查詢值

import React, { useState, useReducer} from "react";
import {useSelector, useDispatch} from 'react-redux'
import { Button, Container, Row, Col, Form, FormGroup, FormInput  } from "shards-react";
import queryBuilder from "../js/helper";
import style from "./SearchForm/body.module.css";
import {searchBook, fetchBooks} from "../actions/SearchActions";

const initialState = {
    title:'',
    author:'',
    publisher:''
}

function reducer(state,{ field, value }){
    return {
        ...state,
        [field]: value
    }
}
function SearchForm() {
    const index = useSelector(state => state.index)
    const [state, dispatch] = useReducer(reducer, initialState);
    const [query, setQuery] = useState('');
    const disp = useDispatch();

    const onChange = e => {
        dispatch({ field: e.target.name, value: e.target.value })
    }

    const { title,author,publisher } = state;
    const handleSubmit = e => {
        e.preventDefault()
        setQuery(queryBuilder(state))

        disp(fetchBooks(query, 0))
    }
    return(
        <div>
            <Container className={style.FormContainer}>

                <Form onSubmit={handleSubmit}>
                    <Row className={'topBar'}>
                        <Col>
                            <FormGroup>
                                <FormInput id={'bookTitle'} name={'title'}   placeholder={'title'} value={title} onChange={onChange}/>
                            </FormGroup>
                        </Col>
                        <Col>
                            <FormGroup>
                                <FormInput id={'bookAuthor'} name={'author'} value={author} onChange={onChange} placeholder={'author'}/>
                            </FormGroup>
                        </Col>
                        <Col>
                            <FormGroup>
                                <FormInput id={'bookPublisher'} name={'publisher'} value={publisher} onChange={onChange}
                                           placeholder={'publisher'}/>
                            </FormGroup>
                        </Col>
                        <Col>
                            <Button outline theme='primary' type={'submit'}>Submit</Button>
                        </Col>
                    </Row>

                </Form>
            </Container>
        </div>
    )
}

export default SearchForm

我不知道缺少什么。

編輯正如建議的那樣，我嘗試使用鈎子，現在一切都很好地捆綁在一起。 現在的問題是取書。 我更新了操作文件，以便您可以看到我添加的操作。 當我調度此操作時，我收到此錯誤

動作必須是普通對象。 使用自定義中間件進行異步操作

有誰知道如何解決這個問題？

Answer 1

我想你的錯誤可以解決為

export const fetchBooks =(query,index) => dispatch => {
    console.log(query)
    axios
        .get(`https://www.googleapis.com/books/v1/volumes?q=${query}&maxResults=40&orderBy=relevance&startIndex=${index}`)
        .then(response =>{
            dispatch({
                type: FETCH_BOOKS,
                payload: response.data.items
            })}
        )
        .catch(err => console.log(err));
};

Answer 2

看起來您在fetchBooks函數中缺少return值。 您沒有返回承諾，這意味着 thunk 中間件沒有收到承諾結果。

export const fetchBooks = (query,index) => {
    console.log(query)
    return axios
        .get(`https://www.googleapis.com/books/v1/volumes?q=${query}&maxResults=40&orderBy=relevance&startIndex=${index}`)
        .then(response =>{
            return({
                type: FETCH_BOOKS,
                payload: response.data.items
            })}
        )
        .catch(err => console.log(err));
};