还原开关语句不起作用

Question

我刚刚从redux开始，并尝试实现一个简单的mern应用程序(用于练习(。我的代码中的所有内容都可以正常工作，但是我的还原功能显示出意外的行为。当操作(从Express API中获取数据(被正确地称为我的还原器时，将成功地转到特定的交换机案例数据日志，但是传递了默认情况和我的组件上的数据三倍。请帮忙。这是我的代码： -

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;

myComponent

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还原器的根还原器：

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

哪种初始状态是：

const initialState = {
    articles:null
};

，在您的mapdispatchtoprops中，您"导入"整个还原状态：

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

我认为您想访问articles属性

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

除此之外，一切似乎都很好。但是，我会在注释中指向的指向初始化articles为空数组[]。

const initialState = {
    articles: []
};