title: React-redux state with external json
body: <p>I want to list posts in PostList.js component from JSON file
  I use react-redux for state managment and redux-saga to get json file</p>
  
  <p>My components are Post.js and PostList.js:</p>
  
  <p><strong>Post.js</strong></p>
  
  <pre><code>    const Post = ({ post }) =&gt; {
      &lt;li&gt;
         {post}
      &lt;/li&gt;
      }
      export default Post
  </code></pre>
  
  <p><strong>PostList.js</strong></p>
  
  <pre><code>class PostList extends React.Component {
  componentDidMount() {
      console.log('did mount');
      this.props.fetchPosts();
  }
  render() {
      return (
          &lt;div&gt;
              &lt;ul&gt;
                  {this.state.posts(post =&gt; (
                      &lt;Post key={post.id} {...post}  /&gt;
                  ))}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  }
  
  export default PostList
  </code></pre>
  
  <p><strong>Reducer</strong></p>
  
  <pre><code>export default (state = [], action) =&gt; {
  switch (action.type) {
      case "FETCH_POSTS":
          return {
              ...state,
              loading: true,
              posts: []
          }
      case "FETCH_FAILD": 
          return {
              ...state,
              loading: false,
              posts: []
          }
      case "FETCH_SUCCESS":
          return Object.assign({}, state, {
              posts: action.posts
          })
      default:
          return state;
  }
  }
  </code></pre>
  
  <p><strong>Actions.js</strong></p>
  
  <pre><code>export const fetchPosts = () =&gt; {
    return {
      type: 'FETCH_POSTS'
    }
  }
  
  export const fetchSuccess = data =&gt; ({
      type: "FETCH_SUCCESS",
      posts: data
  })
  
  
  export const fetchFaild = () =&gt; {
      return {
          type: 'FETCH_FAILD'
      }
  }
  </code></pre>
  
  <p><strong>GetPosts.js (Container)</strong></p>
  
  <pre><code>import  { connect } from 'react-redux'
  import { bindActionCreators } from 'redux'
  
  import PostList from '../components/PostList'
  
  import { fetchPosts } from '../actions'
  
  const mapStateToProps = state =&gt; ({ posts: state.posts });
  
  const mapDispatchToProps = dispatch =&gt; bindActionCreators({fetchPosts}, dispatch);
  
  const GetPosts = connect(
      mapStateToProps,
      mapDispatchToProps 
  )(PostList)
  
  export default GetPosts
  </code></pre>
  
  <p><strong>Saga.js</strong></p>
  
  <pre><code>export function* fetchProducts() {
  try {
      console.log('saga')
      const posts = yield call(api_fetchPost);
      yield put({ type: "FETCH_SUCCESS", posts});
  } catch (e) {
      yield put({ type: "FETCH_FAILD", e});
      return;
  }
  }
  
  export function* watchFetchProducts() {
      yield takeEvery("FETCH_POSTS", fetchProducts)
  }
  </code></pre>