mapStateToProps 从 reducer 返回未定义的状态

Question

我收到这个错误：

我有这个异步减速器：

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 的新手，现在正在使用异步... 我的应用程序应该在页面加载时加载用户，但为什么我的用户状态是 returning 未定义状态？在 render 方法中，我正在记录包含来自 userReducer(mapStateToProps) 的 returned 状态的用户道具，但我未定义。但是当我在商店中获取 getState() 并记录它时，我得到了预期的结果，但它不是使状态正确的理想位置？...我做错了什么？

我的店铺是：

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 中我的默认情况下，我应该在那里编码什么..我应该打破吗？或者我还需要 return 说明吗？谢谢

Answer 1

你应该有；

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

Answer 2

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

全球商店

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

监听用户状态的内部组件

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

mapStateToProps 从 reducer 返回未定义的状态

mapStateToProps returning undefined state from reducer

javascript

state

reactjs