Как правильно работать с api в react-redux?

У меня конкретная проблема, что две перменные props имеют три разных значения в одном компоненте. Суть такая, что мне нужно принять с сервера массив товаров и вычислить максимальное и минимальное значение цены, чтобы задать дефолтные значения и макс. минимальные для слайдера. Я предполагаю, что нужно это делать сразу после получения. Я не стал выкладывать сюда функции по нахождению макс. и мин. значению, тк ошибка возникает даже с этим упрощенным кодом. Как видно на скриншоте, второе дефолтное значение у слайдера остается то что задано в initial state.

Если экшн будет синхронным, обычным, то все ок... Прошу помочь. Как правильно работать с данными полученными с сервера асинхронно ?

Код и скриншот ниже.

Часть кода компонента

max = this.props.max
min = this.props.min
<div className="filter__price">
                    <h4>{ min }-</h4>
                    <h4>{ max }</h4>
                </div>
            <Slider range step={100}
                defaultValue={[min, max]}
                min={min} max={max}
            />

Actions

export const requestPosts = () => ({
    type: "REQUEST_POSTS"
})
export const receivePosts = (json) => ({
    type: "RECEIVE_POSTS",
    posts: json,
    receivedAt: Date.now()
})


export function fetchPosts() {
    return function (dispatch) {
        dispatch(requestPosts())
        return fetch('http://localhost:3000/studios')
            .then(response => response.json())
            .then(json => dispatch(receivePosts(json)))
    }
}

Reducers

const INITIAL_STATE = {
    list: [],
    min: 1400,
    max: 1700,
};

const receivePosts = (state, action) => {

    return {...state,
        list: action.posts,
        max: 1800,
        min: 1500
    }

}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case 'CHANGE_VALUE':
        return changeValue(state,action)
    case 'RECEIVE_POSTS':
        return receivePosts(state,action)
    }
    return state
}