json nicht mit reactjs und redux machen

Question

ich ein .json mit axios laden und die Datei laden und gut, aber wenn ich nicht

editprofile.js gerendert arbeiten - die Versendung> erstellen und Last de 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 -> erstellt die Komponente

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

verbinden die Komponente mit dem Service

 import {editProfile} from '../action/editProfile.js'; 
     import EditProfileComponent from '../component/editProfileComponent.jsx'; 

     export default class EditProfileContainer extends Component{ 
      componentDidMount(){ 
       this.props.editProfile(); 
      } 

      render(){ 
       return (
        <EditProfileComponent allProfile={this.props.allProfile} /> 
       ); 
      } 
     } 

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

     function matchDispatchToProps(dispatch){ 
      return bindActionCreators({ 
       editProfile:editProfile 
      }, dispatch) 

     } 

     export default connect 

(mapStateToProps, matchDispatchToProps)(EditProfileContainer); 

editProfileReducer -> Der Druckminderer

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

die ganze Minderer

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

    const reducers = combineReducers({ 
     allProfile:editProfileReducer, 

    }); 

    export default reducers; 

Answer 1

Ihr Reduzierstück ist fehlerhaft. Für EDIT_PROFILE_SUCCESS, sollte es

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

Auf einer seitlichen Anmerkung sein, können Sie die Vorteile von es6 der Pfeilfunktion übernehmen:

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

Sie sollten auch Konstanten für Aktionsnamen verwenden.

Answer 2

Ich denke, es ist Problem mit beitreten:

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

es sollte sein:

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