mapStateToProps 从 reducer 返回未定义的状态答案

【问题标题】：mapStateToProps returning undefined state from reducermapStateToProps 从 reducer 返回未定义的状态
【发布时间】：2017-05-31 11:41:13
【问题描述】：

我收到此错误：

我有这个用于异步的减速器：

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

const userReducer = (state = initUserState, action) => {
    switch(action.type){
        case "FETCH_USER":
            state = {
                ...state,
                users : action.payload
            };
            break;
        case "FETCH_USER_START":
            state = {
                ...state,
                fetching: true
            };
            break;
        case "FETCH_USER_SUCCESS":
            state = {
                ...state,
                fetched: true,
                users: action.payload
            };
            break;
        case "FETCH_USER_ERROR":
            state = {
                ...state,
                fetched: false,
                error: action.payload
            };
            break;
        default: 
            break;
    }
    return state;
};

export default userReducer;

我的容器是：

import React from 'react';
import { Blog } from '../components/Blog';
import { connect } from 'react-redux';
//import { act_fetchAllUser } from '../actions/userActions';
import axios from 'axios';

class App extends React.Component {

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

    render(){
        console.log("Prop: " , this.props.user);
        return(
            <div>
                <h1>My Blog Posts</h1>
                <Blog/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.userReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchAllUser: () => {
            dispatch((dispatch) => {
                dispatch({ type: "FETCH_USER_START" })
                axios.get('http://infosys.esy.es/test/get_allBlog.php')
                .then((response) => {
                    dispatch({
                        type: "FETCH_USER_SUCCESS",
                        payload: response.data
                    });
                })
                .catch((err) => {
                    dispatch({
                        type: "FETCH_USER_ERROR",
                        payload: err
                    });
                })
            });
        }
    };
};

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

我是 redux 的新手，我现在正在使用异步...... 我的应用程序应该在页面加载时加载用户，但为什么我的用户状态返回未定义状态？在渲染方法中，我正在记录包含从 userReducer(mapStateToProps) 返回的状态的用户道具，但我得到了未定义。但是当我在商店中获取状态（）并记录它时，我得到了预期的结果，但这不是获得正确状态的理想场所？...我做错了什么？

我的商店是：

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import userReducer from './reducers/userReducer';
import thunk from 'redux-thunk';

const store  = createStore(userReducer,applyMiddleware(thunk, logger()));
//store.subscribe(() => console.log('State: ',store.getState()));

export default store;

我的索引是：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './container/App';

import { Provider } from 'react-redux';
import store from './store';

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

另外，在我在 userReducer 中的默认情况下，我应该在那里编写什么代码......我应该打破吗？还是我还需要返回状态？谢谢

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

你应该有；

const mapStateToProps = (state) => {
  return {
    user: state.users
  };
};

【讨论】：

【解决方案2】：

mapStateToProps 将状态（全局存储）作为道具传递给组件。

全球商店

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

内部组件监听用户状态

const mapStateToProps = (state) => {
    return {
        user: state.users
    };
};

【讨论】：