2017-01-16 40 views
2

Error image is here...mapStateToProps從減速返回不確定狀態

我有這樣的減速機異步:

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

進出口新的終極版,我到異步現在... 我的應用程序應該加載頁面加載用戶,但爲什麼我的用戶狀態返回未定義的狀態?在render方法中,我記錄了包含從userReducer(mapStateToProps)返回的狀態的用戶道具,但我得到的是未定義的。但是當我在Store中記錄StateState()並記錄它時,我得到了預期的結果,但它不是理想狀態嗎?......我做錯了什麼?

我的店是:

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我的默認情況下,我應該怎麼編寫有..我應該只是打破;還是我還需要返回狀態呢?謝謝

回答

4

你應該有;

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

1

mapStateToProps傳遞狀態(全局存儲),爲道具的組件。

全局存儲

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

內部組件傾聽用戶狀態

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