title: How to render array to list using reactjs redux-saga
body: <p>Hello this few days I am trying to render list of products using redux-saga. I am using react-boilerplate as my structure. I have two components ProductsList and ProductsItem:</p>
  
  <p>ProductsList.js</p>
  
  <pre><code>function ProductsList({ loading, error, products }) {
    if (loading) {
      return &lt;List component={LoadingIndicator} /&gt;;
    }
  
    if (error !== false) {
      const ErrorComponent = () =&gt; (
        &lt;ListItem item="Something went wrong, please try again!" /&gt;
      );
      return &lt;List component={ErrorComponent} /&gt;;
    }
  
    if (products !== false) {
      return &lt;List items={products} component={Products} /&gt;;
    }
  
    return null;
  }
  
  ProductsList.propTypes = {
    loading: PropTypes.bool,
    error: PropTypes.any,
    products: PropTypes.any,
  };
  
  export default ProductsList;
  </code></pre>
  
  <p>Products.js:</p>
  
  <pre><code>function Products(props) {
    return (
      &lt;div className="contact"&gt;
        &lt;span&gt;{props.title}&lt;/span&gt;
      &lt;/div&gt;
    );
  }
  
  Products.propTypes = {
    title: PropTypes.string.isRequired
  };
  </code></pre>
  
  <p>List.js</p>
  
  <pre><code>function List(props) {
        const ComponentToRender = props.component;
        let content = &lt;div /&gt;;
  
        // If we have items, render them
        if (props.items) {
          content = props.items.map(item =&gt; (
            &lt;ComponentToRender key={`item-${item.id}`} item={item} /&gt;
          ));
        } else {
          // Otherwise render a single component
          content = &lt;ComponentToRender /&gt;;
        }
  
        return (
          &lt;Wrapper&gt;
            &lt;Ul&gt;{content}&lt;/Ul&gt;
          &lt;/Wrapper&gt;
        );
      }
  
      List.propTypes = {
        component: PropTypes.func.isRequired,
        items: PropTypes.array,
      };
  </code></pre>
  
  <p>My main page container calls an action with ComponentDidMount function (Everyting works there, I debugged it). But maybe something is wrong with prototype ant rendering.</p>
  
  <p>MainPage.js</p>
  
  <pre><code>class MainPage extends React.Component {
    componentDidMount() {
      this.props.onFetch();
    }
  
    render() {
      const { error, loading, products } = this.props;
  
          const reposListProps = {
            loading,
            error,
            products,
          };
  
      return (
           &lt;article&gt;
              &lt;Helmet&gt;
                &lt;title&gt;Products&lt;/title&gt;
                &lt;meta
                  name="description"
                  content="A React.js Boilerplate application products"
                /&gt;
              &lt;/Helmet&gt;
              &lt;div&gt;
                  &lt;ProductsList {...reposListProps} /&gt;
              &lt;/div&gt;
            &lt;/article&gt;
          );
        }
      }
  
  PostedCasesClient.propTypes = {
    loading: PropTypes.bool,
    error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
    products: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
    onFetch: PropTypes.func
  };
  
  
  export function mapDispatchToProps(dispatch) {
    return {
      onFetch: evt =&gt; {
        dispatch(fetchProducts());
      },
    };
  }
  
  const mapStateToProps = createStructuredSelector({
    mainPage: makeSelectPostedCasesClient
  });
  
  const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps,
  );
  </code></pre>
  
  <p>const withReducer = injectReducer({ key: 'main', reducer });
  const withSaga = injectSaga({ key: 'main', saga });</p>
  
  <p>export default compose(
    withReducer,
    withSaga,
    withConnect,
  )(MainPage);</p>
  
  <p>Later after dispaching my fetchProduct action I use sagas. This part also working, because I get my products array to reducer.</p>
  
  <p>Saga.js</p>
  
  <pre><code>export function* getProducts() {
    try {
  
    let requestURL = 'http://localhost:8080/produts';
  
    const products = yield call(request, requestURL, { method: 'GET' });
  
        yield put(fetchProductSuccess(products));
  
    } catch (error) {
      yield put(type: 'FETCH_PRODUCTS_FAILURE', error)
      console.log(error);
    }
  }
  export default function* actionWatcher() {
       yield takeLatest(FETCH_PRODUCTS_BEGIN, getProducts)
  }
  </code></pre>
  
  <p>reducer.js</p>
  
  <pre><code>const initialState = fromJS({
    loading: false,
    error: false,
    items: false
  });
  
  function ProductsReducer(state = initialState, action) {
    switch(action.type) {
      case FETCH_PRODUCTS_BEGIN:
        return state
          .set('loading', true)
          .set('error', false)
          .setIn('items', false);
      case FETCH_PRODUCTS_SUCCESS:
        return state
          .setIn('items', action.products)
          .set('loading', false)
      case FETCH_PRODUCTS_FAILURE:
        return state.set('error', action.error).set('loading', false);
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Maybe someone could tell me what I am doing wrong? If you need more code please tell me, I will edit it.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is my selector:</p>
  
  <pre><code>const selectGlobal = state =&gt; state.get('global');
  
  const makeSelectMainClient = () =&gt;
    createSelector(selectMainPageDomain, substate =&gt; substate.toJS());
  
    const makeSelectLoading = () =&gt;
      createSelector(selectGlobal, globalState =&gt; globalState.get('loading'));
  
    const makeSelectError = () =&gt;
      createSelector(selectGlobal, globalState =&gt; globalState.get('error'));
  
    const makeSelectProducts = () =&gt;
      createSelector(selectGlobal, globalState =&gt;
        globalState.getIn(['products']),
      );
  
  export default makeSelectPostedCasesClient;
  export {
  selectMainPageDomain,
    selectGlobal,
    makeSelectLoading,
    makeSelectError,
    makeSelectProducts,
  };
  </code></pre>