javascript - reducer 开关语句不起作用

Question

我刚刚开始使用 Redux 并尝试实现一个简单的 MERN 应用程序(用于练习)。 我的代码中的所有内容都运行良好，但我的 reducer 函数显示出意外行为。当一个 Action (从 express api 获取数据)被调用时，我的 reducer 正确地转到了特定的开关案例数据日志，但是默认案例被传递了三次，我记录的组件上的数据显示为空。请帮忙。 这是我的代码:-

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;

文章.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 reducer 的 root 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: []
};