Когда я использую метод PUT для axios и я помещаю данные на сервер, данные помещаются в старые данные и сервер не обновляется, но хранилище изменяется при выполнении действия, кажется, что хранилище и серверне синхронизированы.
apiCaller.js
const API_URL = 'https://s39o5.sse.codesandbox.io' ;
export default function callApi(endpoint, method = 'GET', body){
return axios({
method: method,
url: `${Config.API_URL}/${endpoint}`,
data: body
}).catch(err => {
console.log(err);
});
};
action / index.js
export const fetchIsActiveList = (users)=>{
return dispatch =>{
return callApi (`list/${users.id}`,'PUT',users).then(res =>{
dispatch(itemRequestActive(res.data))
}) ;
}
}
export const itemRequestActive = (id) => {
return {
type: ITEM_REQUEST_ACTIVE,
id
}
}
компоненты / ListItems.js
componentDidMount() {
var { match } = this.props;
var id = match.params.id;
this.props.fetchAllListItem(id);
}
onAccept(user) {
this.props.fetchIsActive(user);
}
render {
const { user } = this.props;
return (){
<div>
{ user.map((user, index) =>(
...
<h5 onClick={() => this.onAccept(user)} >Accept</h5>
))}
</div>
}
}
const mapStateToProps = (state) => {
return {
user: state.listItems,
}
}
const mapDispatchToProps = (dispatch) => {
return {
fetchAllListItem: (id) => {
dispatch(actFetchListItemRequest(id))
},
fetchIsActive: (user) => {
dispatch(fetchIsActiveList(user));
}
}
}
редукторы / ListItem
export const list = ( state = initialState, action ) => {
switch (action.type) {
case FETCH_LIST:
return [... action.list];
case IS_ACTIVE_LIST:
return state.map(i => i.id !== action.id.id ?
{ ...i , active: false } : { ...i, active: true});
default:
return state
}
}