取得したデータがコンポーネントに届きませんでした

Question

React + Reduxを使用してAPIからデータを取得しようとしましたが、何らかの理由でデータがレンダリングに失敗しました（redux-loggerの場合） 何らかの理由で、減速器はareLoading値をfalseに変更せず、データはページに到達しません。しかし、私はどこに間違いがあるのか​​分からず、すべてが正しいようです。

コンポーネント：

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

リデューサー：

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

私は "偽action.areLoading =を返す" ために私のreturn文を変更した場合は、そのリターンaction.data後、すべてが動作します。しかし、この解決策は正しくないようです。

アクション：

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

ミドルウェア：

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

私は、フォーラムで解決策を探し、それらのどれも私を助けていないようにみえます。私はReact + Reduxにも新しい、初心者の質問には申し訳ありません。

ありがとうございます。

Answer 1

あなたがオブジェクトとしてposts行動にdataを渡しているとあなたがaction.dataをやっている時に減速がdataキーを認識しません。 2つの場所でdataをdata: dataに変更する必要があると思います。

ミドルウェアで

：私は理解

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

Answer 2

：postsアクションで

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

：

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

と減速が今とても似actionからキーdataにアクセスすることができます何が問題だったかここで

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

私は、オブジェクトをstate.postへのリンクを得ました。

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

にそれを変更する

は、それがオブジェクトのプロパティに見えるように助けのため全体ではなく、オブジェクトの

感謝を作ります！