减速器开关语句不起作用

Question

我刚开始使用 Redux 并尝试实现一个简单的 MERN 应用程序（用于练习）。 我的代码中的所有内容都运行良好，但我的 reducer 函数显示出意外的行为。当一个动作（从 express api 获取数据）被调用时，我的 reducer 正确地转到特定的 switch case 数据日志，但随后通过了三倍的默认 case，并且我记录的组件上的数据显示为 null。请帮忙。 这是我的代码：-

index.js

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

const rootReducer = combineReducers({
    articles: articlesReducer
});
const store = createStore(rootReducer, applyMiddleware(thunk));
const app = (
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>
);

ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

App.js

import React, {Component} from 'react';
import {Switch, Route} from 'react-router-dom';
import './App.css';
import Home from './components/Home/Home';

class App extends Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route exact path="/" component={Home} />
                </Switch>
            </div>
        );
    }
}
export default App;

articles.js

export const getAllArticles = () => {
    return dispatch => {
        return (
            fetch('http://localhost:5000/api/articles')
                .then(res => res.json())
                .then(data => {
                    dispatch({type: 'GET_ALL_ARTICLES', articles: data})
                })
        );
    };
};

articlesReducer.js

const initialState = {
    articles:null
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'GET_ALL_ARTICLES':
            console.log('in reducer', action.type, action.articles[0]);
            return {
                ...state,
                articles: action.articles
            };
        default:
            console.log('In default');
            return state;
    }
};
export default reducer;

我的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAllArticles } from '../../store/actions/articles.js';

class MainPage extends Component {

    componentWillMount() {
        this.props.initArticles();
        console.log(this.props.articles);
    }

    render() {
        return (
            <div className="container">
                <br />
                <h1>Here comes the articles!!</h1>
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        articles: state.articles
    };
};

const mapDispatchToProps = dispatch => {
    return {
        initArticles: () => dispatch(getAllArticles())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(MainPage);

我的控制台中的输出有点像这样：-

In default
In default
In default
{articles: null}
in reducer GET_ALL_ARTICLES {articles[0] Object}

我不知道是什么错误。提前感谢您的帮助。

Answer 1

我不确定这是否真的是问题所在，但您错误地访问了articles。你有一个带有articles reducer 的根 reducer：

const rootReducer = combineReducers({
    articles: articlesReducer
});

初始状态是：

const initialState = {
    articles:null
};

在你的 mapDispatchToProps 中你“导入”整个 reducer 状态：

const mapStateToProps = state => {
    return {
        articles: state.articles
    };
};

我想你想访问articles 属性

const mapStateToProps = state => {
    return {
        articles: state.articles.articles
    };
};

除此之外，一切似乎都很好。但是，正如评论中指出的那样，我会将 articles 初始化为空数组 []。

const initialState = {
    articles: []
};