[英]mapStateToProps returning undefined state from reducer
I am getting this error:我收到此错误:
I have this reducer for async:我有这个异步减速器:
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;
And my container is:我的容器是:
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 new to redux and I am into async now... my application should load the users on page load but why my user state is returning undefined state?我是 redux 的新手,我现在进入异步状态……我的应用程序应该在页面加载时加载用户,但为什么我的用户状态返回未定义状态? in the render method, i am logging the user props that contains the returned state from userReducer(mapStateToProps) but i am getting undefined.
在渲染方法中,我正在记录包含从 userReducer(mapStateToProps) 返回的状态的用户道具,但我没有定义。 But when I getState() in store and log it, I am getting the expected result but it is not the ideal place to get the state right?... What i am doing wrong?
但是当我在商店中使用 getState() 并记录它时,我得到了预期的结果,但这不是使状态正确的理想场所?...我做错了什么?
My store is:我的店铺是:
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;
And my index is:我的索引是:
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'));
Also, on my default case in userReducer, what should I code there.. should I just break;另外,在 userReducer 的默认情况下,我应该在那里编码什么......我应该打破吗? or do I need also to return state it?
或者我还需要返回状态吗? Thank you
谢谢
You should have;你应该有;
const mapStateToProps = (state) => {
return {
user: state.users
};
};
mapStateToProps passes state (global store) as a props to the component. mapStateToProps 将状态(全局存储)作为道具传递给组件。
Global store全球门店
const initUserState = {
fetching: false,
fetched: false,
users: [],
error: null
};
inside component listening to user state内部组件监听用户状态
const mapStateToProps = (state) => {
return {
user: state.users
};
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.