How to work with api in react-redux?

I have a specific problem that the two variables props have three different values in one component.
The thing that I need to receive from the server an array of products and calculate the maximum and minimum value to specify default values minimum and maximum for the slider.
I guess you need to do it immediately after receiving it. I did not put here a function to find max and min value, maybe the error occurs even with this simplified code. As you can see in the screenshot, the second a default value of a slider is that set in initial state.

If action is synchronous, the usual, then everything is OK...
Please help

Code and screenshot below.

5a9aae9a02936743673530.png
Part of the code component
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}"></slider>


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>
</app></provider>,

document.getElementById('root')
);
June 7th 19 at 14:29
0 answer

Find more questions by tags ReduxAPIReact