How to render array to list using reactjs redux-saga

Question

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:

ProductsList.js

function ProductsList({ loading, error, products }) {
  if (loading) {
    return <List component={LoadingIndicator} />;
  }

  if (error !== false) {
    const ErrorComponent = () => (
      <ListItem item="Something went wrong, please try again!" />
    );
    return <List component={ErrorComponent} />;
  }

  if (products !== false) {
    return <List items={products} component={Products} />;
  }

  return null;
}

ProductsList.propTypes = {
  loading: PropTypes.bool,
  error: PropTypes.any,
  products: PropTypes.any,
};

export default ProductsList;

Products.js:

function Products(props) {
  return (
    <div className="contact">
      <span>{props.title}</span>
    </div>
  );
}

Products.propTypes = {
  title: PropTypes.string.isRequired
};

List.js

function List(props) {
      const ComponentToRender = props.component;
      let content = <div />;

      // If we have items, render them
      if (props.items) {
        content = props.items.map(item => (
          <ComponentToRender key={`item-${item.id}`} item={item} />
        ));
      } else {
        // Otherwise render a single component
        content = <ComponentToRender />;
      }

      return (
        <Wrapper>
          <Ul>{content}</Ul>
        </Wrapper>
      );
    }

    List.propTypes = {
      component: PropTypes.func.isRequired,
      items: PropTypes.array,
    };

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.

MainPage.js

class MainPage extends React.Component {
  componentDidMount() {
    this.props.onFetch();
  }

  render() {
    const { error, loading, products } = this.props;

        const reposListProps = {
          loading,
          error,
          products,
        };

    return (
         <article>
            <Helmet>
              <title>Products</title>
              <meta
                name="description"
                content="A React.js Boilerplate application products"
              />
            </Helmet>
            <div>
                <ProductsList {...reposListProps} />
            </div>
          </article>
        );
      }
    }

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 => {
      dispatch(fetchProducts());
    },
  };
}

const mapStateToProps = createStructuredSelector({
  mainPage: makeSelectPostedCasesClient
});

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'main', reducer }); const withSaga = injectSaga({ key: 'main', saga });

export default compose( withReducer, withSaga, withConnect, )(MainPage);

Later after dispaching my fetchProduct action I use sagas. This part also working, because I get my products array to reducer.

Saga.js

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

reducer.js

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

Maybe someone could tell me what I am doing wrong? If you need more code please tell me, I will edit it.

EDIT:

Here is my selector:

const selectGlobal = state => state.get('global');

const makeSelectMainClient = () =>
  createSelector(selectMainPageDomain, substate => substate.toJS());

  const makeSelectLoading = () =>
    createSelector(selectGlobal, globalState => globalState.get('loading'));

  const makeSelectError = () =>
    createSelector(selectGlobal, globalState => globalState.get('error'));

  const makeSelectProducts = () =>
    createSelector(selectGlobal, globalState =>
      globalState.getIn(['products']),
    );

export default makeSelectPostedCasesClient;
export {
selectMainPageDomain,
  selectGlobal,
  makeSelectLoading,
  makeSelectError,
  makeSelectProducts,
};

Answer 1

You need update the mapStateToProps function connecting the MainPage component to receive the data in your new reducers. Currently you have:

const mapStateToProps = createStructuredSelector({
  mainPage: makeSelectPostedCasesClient
});

However, your component expect to receive loading, error, and products. You will need to create a mapStateToProps function that provides these variables to your component. Something like:

const mapStateToProps = createStructuredSelector({
  products: makeSelectProducts(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
});

You may have to write your own selectors for getting the data out of your ProductsReducer. Once you do this, when your reducers gets new data, the selectors will automatically get the new data and update your component.