Question

我刚刚开始使用Redux并尝试实现一个简单的MERN应用程序（用于练习）。我的代码中的所有内容都运行正常，但我的reducer函数显示出意外的行为。当一个动作（从快速api获取数据）被调用时，我的reducer正确地成功地转到特定的switch 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;

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 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: []
};

减速机开关声明不起作用

1 个答案: