React redux 不更新全局状态

Posted 2023-02-22

【中文标题】React redux 不更新全局状态

【英文标题】：React redux not updating global state

【发布时间】：2020-12-29 06:31:45

【问题描述】：

我正在使用不带钩子的 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

我不知道缺少什么。

编辑 正如建议的那样，我尝试使用钩子，现在一切都很好地捆绑在一起。现在的问题是取书。我更新了动作文件，以便您可以看到我添加的动作。当我发送此操作时，我收到此错误

动作必须是普通对象。使用自定义中间件进行异步操作

有人知道如何解决这个问题吗？

【问题讨论】：

我建议在你的功能组件中使用useDispatch 和useSelector 钩子而不是connect；它可能会简化您的代码并帮助您诊断问题

【参考方案1】：

您的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));
;

【参考方案2】：

我猜你的错误可以解决为

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));
;

【讨论】：

我已经尝试过了，但是通过调度，我通过的查询只是在函数内部未定义