2017-01-02 5 views
0

reactjsとReduxのでレンダリング、私はレンダリング時JSON私はうまくaxiosと.json、およびファイルのロードをロード

editprofile.jsいけない仕事はない -

>の発送を作成し、負荷デJSON
export const editProfile = (callback)=>{ 
     return function(dispatch){ 
      dispatch({type: 'EDIT_PROFILE_REQUEST'}); 
      axios({ 
        method: 'get', 
        url: 'https://gist.githubusercontent.com/anonymous/38c1444f753c70cf79ee980638a14de7/raw/34951eebfa006fea3db00fb492b491ac990c788e/vamos.json', 
        headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
       }) 
      .then((response)=>{ 
       dispatch({type:'EDIT_PROFILE_SUCCESS', payload:response.data}); 
       if (typeof callback === 'function') { 
        callback(null, response.data); 
       } 
      }) 
      .catch((error) =>{ 
       dispatch({type:'EDIT_PROFILE_FAILURE'}); 
       if(error.response.status == 401){ 
        browserHistory.push('login') 
        toastr.error(error.response.message, 'User') 
       } 
       if(typeof callback ==='function'){ 
        callback(error.response.data, null) 
       }   
      }) 
     } 
    } 

EditProfileComponent.jsx - >コンポーネント

export default class EditProfileComponent extends Component{ 
     render(){ 
      return(
       <table> 
        <thead> 
         <tr> 
          <th>SN</th> 
          <th>Email</th> 
          <th>created</th> 
         </tr> 
        </thead> 
        <tbody> 
         {this.renderEditProfile()} 
        </tbody> 
       </table> 
      ) 
     }  
     renderEditProfile(){ 
      let sN = 1; 
      return this.props.allProfile.map((user)=>{ 
       return(
        <tr key={user.sN} > 
         <td>{sN++}</td> 
         <td>{user.email ? user.email : '---'}</td> 
         <td>{user.created_at ? user.created_at : '---'}</td> 
        </tr> 
       ); 
      }); 
     } 
    } 

がサービス

とコンポーネントに参加作成

editProfileReducer - >減速

export const editProfileReducer = (state=[], action) =>{ 
    switch(action.type){ 
     case 'EDIT_PROFILE_REQUEST': 
      return state; 
     case 'EDIT_PROFILE_FAILURE': 
      return state; 
     case 'EDIT_PROFILE_SUCCESS': 
      return [...action.payload]; 
     default: 
      return state; 
    } 
} 

は私がに問題があると思い、すべての減速

import { editProfileReducer } from './reducer/editProfileReducer.js' 

    const reducers = combineReducers({ 
     allProfile:editProfileReducer, 

    }); 

    export default reducers; 

答えて

1

還元剤にエラーがあります。 EDIT_PROFILE_SUCCESSのために、それはサイドノートで

case 'EDIT_PROFILE_SUCCESS': 
    return [...state, action.payload]; 

する必要があり、あなたはES6の矢印機能を利用することができます。

export const editProfile = (callback) => (dispatch) => { 
    dispatch({type: 'EDIT_PROFILE_REQUEST'}); 
    // .... 
}; 

また、アクションの名前の定数を使用する必要があります。

+0

はいその問題は、ありがとう –

0

参加:

function mapStateToProps(store) { 
      return { 
       allProfile:store.allProfile 
      }; 
     } 

それは次のようになります。

function mapStateToProps(state) { 
      return { 
       allProfile:state.allProfile 
      }; 
     } 
関連する問題