Question

我的redux减速器有问题，在调度“ FETCH_BOOKS”操作后，它没有返回预期状态，它返回了一个空对象，而不是状态对象，即AJAX请求获取的书，当我将状态存储在数组而不是对象中时，reducer返回正确的数据，这是如此令人困惑，为什么会这样？

这些是我的组成部分

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import * as BooksAPI from './BooksAPI';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import { bookReducer } from './reducers/BookReducer';
import thunk from 'redux-thunk';
import {BrowserRouter as Router} from 'react-router-dom';

const middleware = [thunk];
const initialState = {};
const store = createStore(bookReducer, initialState, applyMiddleware(...middleware));

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>   
  </Provider>, 
  document.getElementById('root')
);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import BookShelf from './components/BookShelf'
import AllShelves from './components/AllShelves'
import Header from './components/Header';
import SearchPage from './components/SearchPage';
import * as BooksAPI from './BooksAPI';
import { Route, withRouter } from 'react-router-dom';
import './App.css';

class App extends Component {  

  componentWillMount() {
    this.props.fetchBooks();
  }

  render() {
    console.log(this.props.books)
    return (
      <div className="App">
        <Header />
        <Route exact path="/" component={AllShelves} />         
        <Route  path="/search" component={SearchPage} />
      </div>
    );
  }
}


const mapStateToProps = (state) => {
    return {
      books: state.books
    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchBooks: () => {
       BooksAPI.getAll().then(books => dispatch({
         type: 'FETCH_BOOKS',
         books
       }))
    },

  }
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))

不起作用的减速器

import { FETCH_BOOKS } from '../actions/Types.js';

import * as BooksAPI from '../BooksAPI'

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

 export const bookReducer = (state = initialState, action) => {
   switch(action.type) {
     case 'FETCH_BOOKS':
       return {
         ...state,   
         books: action.books,
       }
     default: 
       return state;
   }
}

起作用的减速器

 export const bookReducer = (state = [], action) => {
   switch(action.type) {
     case 'FETCH_BOOKS':
       return action.books
     default: 
       return state;
   }
}

所以为什么将状态存储在对象中不起作用，并且为什么它与数组完美配合，我不想将状态存储在数组中，因为书不是我需要在状态下管理的唯一数据！ / p>

Answer 1

在第二个示例中，您将化简器中的值作为 action.books 来获取，而应该是 action.payload ，因为这是实际分发的密钥。

Answer 2

在分派任何Action后，您必须将新状态返回到商店，因此必须返回新状态对象，因为您必须立即获取状态并更改帐簿并返回新状态，因此按照以下代码进行操作< / p>

frame = cv2.resize(frame,(int(frameWidth/2), int(frameHeight/2))) 
frameHeight, frameWidth, fdepth = frame.shape

但是从其他化简器中，您仅返回错误操作方式所产生的books数组

Answer 3

我已经检查了所有代码，并且认为问题可能来自redux存储设置：

const initialState = {};
const store = createStore(bookReducer, initialState, applyMiddleware(...middleware));

我建议删除initialState：

const initialState = {};    // remove this line cuz we don't need it
const store = createStore(bookReducer, applyMiddleware(...middleware)); //fixed like this

此外，我认为您应该在componentDidMount()生命周期挂钩中而不是componentWillMount()来获取图书，如下所示：

componentDidMount() {
  this.props.fetchBooks();
}

为什么我的reducer返回的状态是一个空对象？（React-Redux）

3 个答案: