POST action replaces entire data array (until refresh)

When I do a POST action, the entire array of data (this.state.kittens.data below) is replaced by the new post data. When I do a browser refresh, the data is restored. Why?

reduxApi config:

export default reduxApi({

	kittens: {
		url: '/api/kittens/:id',
		crud: true,
		transformer: transformers.array,
		options: {
			headers: {
				'Accept': 'application/json',
				'Content-Type': 'application/json'
			}
		}
	}

}).use('fetch', adapterFetch(fetch));

POST action:

handleAdd (event) {
	const newKitten = {
		name: this.state.name,
	};
	this.props.dispatch(reduxApi.actions.kittens.post({}, { body: JSON.stringify(newKitten) }));
}

JSX:

<button onClick={this.handleAdd.bind(this)}>Add kitten</button>

[lexich]

Good implementation 👍

[tomsoderlund]

Not sure if this is the right approach, but I solved it with a custom transformer:

transformer: function (data, prevData, action) {
	const actionMethod = _.get(action, 'request.params.method');
	switch (actionMethod) {
		case 'POST':
			return [...prevData, data];
			break;
		case 'PUT':
			return prevData.map(oldData => oldData._id === data._id ? data : oldData);
			break;
		case 'DELETE':
			return _(prevData).filter(oldData => oldData._id === data._id ? undefined : oldData).compact().value();
			break;
		default:
			return transformers.array.call(this, data, prevData, action);
	}
},

Also, I had to modify the server API to return the _id of the deleted item.

Thankful for any suggestions on how to improve.