Abgerufene Daten konnten die Komponente nicht erreichen

Question

Ich versuche, Daten aus der API mit React + Redux zu holen, aber aus irgendeinem Grund können Daten nicht gerendert werden, obwohl ich sehe, dass es in der Konsole kommt (mit Redux-Logger) Es sieht so aus Aus irgendeinem Grund ändert Reducer den Wert von areLoading nicht auf false - und die Daten erreichen die Seite nicht. Aber ich kann uns nicht vorstellen, wo der Fehler ist, alles scheint richtig zu sein.

Komponente:

class Posts extends Component { 
    componentDidMount() { 
     this.props.postsFetch(); 
    } 
    render() { 

     return (
      <div> 

       {this.props.data.map(function(post, i) { 
        return (
         <div className="tale" key={i}> 
          <p className="title" key={i}>{post.title}</p> 
         </div> 
        ); 
       }) 
       } 
      </div> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     data: state.posts, 
     gotError: state.postsError, 
     areLoading: state.postsLoading 
    }; 
}; 

export default connect(mapStateToProps, { postsFetch })(Posts); 

Reduzierungen:

const INITIAL_STATE = { 
    areLoading: false, 
    gotError: false, 
    items: [] 
} 
export function postsError(state = INITIAL_STATE, action) { 
    switch (action.type) { 
     case "POSTS_REQUEST_FAILURE": 
      return { 
       ...state, 
       gotError: true  
      } 
     default: 
      return state; 
    } 
} 

export function postsLoading(state = INITIAL_STATE, action) { 
    switch (action.type) { 
     case "POSTS_REQUEST_LOADING": 
      return { 
       ...state, 
       areLoading: true  
      } 
     default: 
      return state; 
    } 
} 

export function posts(state = INITIAL_STATE, action) { 
    switch (action.type) { 
     case "POSTS_REQUEST_SUCCESS": 
      return { 
       ...state, 
       areLoading: false, 
       items: action.data 
      } 
     default: 
      return state; 
    } 
} 

Wenn ich meine return-Anweisung ändern, und nach dieser Rückkehr action.data zu "action.areLoading = false zurückgeben", alles funktioniert. Aber diese Lösung scheint nicht richtig zu sein.

Aktionen:

export function postsError() { 
    return { 
     type: "POSTS_REQUEST_FAILURE", 
    }; 
} 

export function postsLoading() { 
    return { 
     type: "POSTS_REQUEST_LOADING", 
     url: 'http://jsonplaceholder.typicode.com/posts/', 
    }; 
} 

export function posts(data) { 
    return { 
     type: "POSTS_REQUEST_SUCCESS", 
     data 
    }; 
} 

export function postsFetch() { 
    return function (dispatch) { 
     dispatch(postsLoading()); 
    } 
} 

Middleware:

export const apiCallMiddleware = store => next => action => { 
    const { url, ...rest } = action; 

    if (!url) return next(action) 

    next({ type: "POSTS_REQUEST_LOADING" }) 

    axios(url) 
     .then(response => { 
      const data = response.data 
      next({ type: "POSTS_REQUEST_SUCCESS", data }) 
     }) 
     .catch(err => { 
      next({ ...rest, type: "POSTS_REQUEST_FAILURE" }) 
     }) 
} 

ich für ein Lösung im Forum gesucht, aber keiner von ihnen scheint mir zu helfen. Ich bin auch neu in React + Redux, Entschuldigung für eine neue Frage.

Vielen Dank im Voraus.

Answer 1

Sie vorbei data in die posts Aktion als Objekt und das Reduktions nicht erkennt eine data Taste, wenn Sie action.data tun sind. Ich glaube, Sie müssen data zu data: data an zwei Stellen ändern.

In der Middleware:

next({ type: "POSTS_REQUEST_SUCCESS", data: data }) 

Im posts Aktion:

export function posts(data) { 
    return { 
     type: "POSTS_REQUEST_SUCCESS", 
     data: data     //<--------- 
    }; 
} 

und das Reduktions zugreifen können jetzt den Schlüssel data von action wie so:

case "POSTS_REQUEST_SUCCESS": 
    return { 
    ...state, 
    areLoading: false, 
    items: action.data 
    } 

Answer 2

ich heraus was war das Problem.

Hier

const mapStateToProps = (state) => { 
    return { 
     data: state.posts, 
     gotError: state.postsError, 
     areLoading: state.postsLoading 
    }; 
}; 

i Links bekam Objekt state.post.

Ändern es zu

const mapStateToProps = (state) => { 
    return { 
     data: state.posts.items, 
     gotError: state.posts.gotError, 
     areLoading: state.posts.areLoading 
    }; 
}; 

machen es auf Objekteigenschaften zu suchen, anstelle des gesamten Objekts

Danke für die Hilfe!