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

Question

[mr jeery]

У меня конкретная проблема, что две перменные 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

}

index.js

import { fetchPosts } from './actions'

const store = createStore(rootReducer,composeWithDevTools(
    applyMiddleware(thunkMiddleware, loggerMiddleware) ) );

store.dispatch(fetchPosts())

render(

    <Provider store={store}>
        <App />
    </Provider>,

    document.getElementById('root')
);