Ledoux

{
  "id": "F5UQ",
  "name": "Projets Rencontre - salle du Clous Brest",
  "stocks": [
    { "available": 5, "id": "K3EQ" },
    { "available": 5, "id": "KYSA" },
  ]
}

Ledoux

import { applyMiddleware, combineReducers, createStore } from "redux";
import thunk from "redux-thunk";
import { createDataReducer } from "redux-thunk-data";

const storeEnhancer = applyMiddleware(thunk.withExtraArgument({ rootUrl: "https://foo.com" }));
const rootReducer = combineReducers({ data: createDataReducer() });

const store = createStore(rootReducer, storeEnhancer);

Ledoux

import { applyMiddleware, combineReducers, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { all } from "redux-saga/effects";
import { createDataReducer, watchDataActions } from "redux-saga-data";

const sagaMiddleware = createSagaMiddleware();
const storeEnhancer = applyMiddleware(sagaMiddleware);
function* rootSaga() {
  yield all([
    watchDataActions({

Ledoux

...
dispatch(
  requestData({
    apiPath: `/offers/${offerId}`,
    normalizer: {
      stocks: "stocks"
    }
  })
);
...

Ledoux

import { mergeData, requestData } from "redux-saga-data";

function mapDispatchToProps(dispatch, ownProps) {
  return {
    requestGetOffer: () => {
      const {
        match: {
          params: { offerId }
        }
      } = ownProps;

Ledoux

function mapStateToProps(state, ownProps) {
  const {
    match: {
      params: { offerId }
    }
  } = ownProps;
  return {
    offer: selectOfferById(state, offerId),
    stocks: selectStocksByOfferId(state, offerId)
  };

Ledoux

const selectStocksByOfferId = createSelector(
  state => state.data.stocks,
  state, offerId => offerId,
  (stocks, offerId) => stocks && stocks.filter(stock => stock.offerId === offerId)
)

function mapStateToProps(state, ownProps) {
  const { match: { params: { offerId } } } = ownProps
  return {
    offer: selectOfferById(state, offerId),

Ledoux

...

class Offer extends Component {
  componentDidMount () {
    const { dispatch, match: { params: { offerId } } } = this.props
    dispatch(requestData({
      apiPath: `/offers/${offerId}`,
      normalizer: {
        stocks: 'stocks'
      }

Ledoux

import { createSelector } from 'reselect'

const selectOfferById = createSelector(
  state => state.data.offers,
  (state, offerId) => offerId,
  (offers, offerId) => (offers || []).find(offer => offer.id === offerId)
)

export default selectOfferById

Ledoux

const OfferContainer = compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Offer);