Reduxを使用してデータを渡すと、this.propsはまだ空の配列

Question

Reduxを使用してアクションからデータを取得し、取得したJSONオブジェクトのプロパティをコンポーネント内に表示しようとしています。しかし、私はインターネットの周りに見たすべての手順を実行した後も、私のコンポーネントでconsole.log（this.props）を実行するとまだ空の配列が得られます。この空の配列は、使用されるたびに項目を追加し、毎回配列に「未定義」項目を追加しているようです。

まあ、私のaction.js：

import 'whatwg-fetch'; 


export const FETCH_RECIPES = 'FETCH_RECIPES'; 
const ROOT_URL = 'http://myapi/recipe/id/'; 

export function fetchRecipes(id) { 
    const url = ROOT_URL + id; 
    return (dispatch) => { 
    fetch(url) 
     .then((response) => response.json()) 
     .then((request) => dispatch(fetchRecipesSuccess(request))) 
    }; 
} 

export function fetchRecipesSuccess(request) { 
    return { 
     type: FETCH_RECIPES, 
     request 
    }; 
} 

と私は私の中にアクションをインポートするよ減速、reducer_recipes.js：

import { FETCH_RECIPES } from "../actions/index"; 

export function recipes (state = [], action) { 
    switch(action.type) { 
     case FETCH_RECIPES: 
      return [action.request.data, ...state]; 
     default: 
      return state; 
    } 
} 

マイCREATESTORE： const createStoreWithMiddleware = createStore(rootReducer, applyMiddleware(thunk));

Aaaaand最後に、私のコンポーネントの関連するコードスニペット：

componentDidMount() { 
    this.props.fetchData(1); 
} 

render() { 
    return (
     <h1>{console.log(this.props)}</h1> 
)} 


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

const mapDispatchToProps = (dispatch) => { 
    return { 
     fetchData: (id) => dispatch(fetchRecipes(id)) 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Recipe); 

ここで、this.propsへの接続を削除しますか？これで何時間も頭を叩いた。

Answer 1

レシピ

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

、私はAPIリクエストで返されたデータを見ることができなかったが、私はあなたの状態がアクセスしているとき、あなたは配列のプロパティを持つオブジェクトとしてアクセスしている

の下に一つのことに気づきました

しかし、あなたはおそらく、あなたが

を試みることができる[]、

import { FETCH_RECIPES } from "../actions/index"; 

export function recipes (state = [], action) { 
    switch(action.type) { 
     case FETCH_RECIPES: 
      return [action.request.data, ...state]; 
     default: 
      return state; 
    } 
} 

で配列を返すされています

return {...state, action.request.data}; 

または回答のため

return {...state, recipes: action.request.data};