As I am new to react ,I am trying to make a simple blog app using redux with react but I am facing issue while fetching the blogs.It is giving error TypeError: post1.map is not a function .Here is my code so please help me I m stuck here.
actions/index.js
export const FETCH_POSTS = 'fetch_posts';
export function fetchPosts() {
const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);
return {
type: FETCH_POSTS,
payload: request
};
}
reducers/reducer_posts.js
import { FETCH_POSTS } from '../action';
export default function (state = {post:[]}, action) {
switch (action.type) {
case FETCH_POSTS:
return {
...state,
post: action.payload,
}
default:
return state;
}
}
reducers/index.js
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import PostsReducer from './reducer_posts';
const rootReducer = combineReducers({
posts: PostsReducer,
form: formReducer
});
export default rootReducer;
component/posts_index.js
class PostsIndex extends Component {
componentDidMount() {
this.props.fetchPosts();
}
render() {
const post1=this.props
console.log(post1) //getting data in console
const map_post= post1.map(post => <li key={post.id}>{post.title}</li>)
console.log(this.props.posts); // getting data here as well
return(
<div>
<ul className="list-group">
{map_post}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return { posts: state.posts ,
post1:state.posts.posts
};
}
export default connect(mapStateToProps, { fetchPosts })(PostsIndex);
src/App.js
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
function App() {
return (
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div className="App">
<Switch>
<Route path="/posts/new" component={PostsNew} />
<Route path="/posts/:id" component={PostsShow} />
<Route path="/" component={PostsIndex} />
</Switch>
</div>
</BrowserRouter>
</Provider>
);
}
Also I am getting all the post in my console when I log it by commenting out the
const map_post= post1.map(post => <li key={post.id}>{post.title}</li>)
but I am not able to render it in my component.I am getting error × TypeError: post1.map is not a function
Console Output having All post
Thanks in advance