mapStateToProps возвращающегося неопределенное состояния из редуктора

Question

Error image is here...

У меня есть этот редуктор для асинхронного:

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); 

Im новый для Redux, и теперь я в асинхронном ... Мое приложение должно загружать пользователей на загрузку страницы, но почему мое пользовательское состояние возвращает неопределенное состояние? в методе рендеринга я регистрирую пользовательские реквизиты, которые содержат возвращенное состояние от userReducer (mapStateToProps), но я становлюсь неопределенным. Но когда я получаюState() в магазине и регистрирую его, я получаю ожидаемый результат, но это не идеальное место, чтобы получить право штата? ... Что я делаю неправильно?

Мой магазин:

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, что я должен закодировать там .. я должен просто сломать; или мне нужно также вернуть его состояние? Спасибо

Answer 1

Вы должны иметь;

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

Answer 2

mapStateToProps проходит государственную (глобальный магазин) в качестве подпорки к компоненту.

Глобальный магазин

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

внутри компонента прослушивания состояния пользователя

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