acdlite / acdlite/flummox

Action creator or store for performing save/update ajax

Open
#227 3 comments 0 reactions 0 assignees View on GitHub
outdated question
Dominant language
JavaScript
Stars
1.7k
Forks
109
PR merge metrics
No merged PRs in 30d

Description

Hi,
im struggling with deciding where to trigger my save/update AJAX calls from. In your examples all the I/O is done in the action creator. This makes a lots of sense for initial state, making sure the flux instance is loaded before rendering etc, but in cases where your true state is in the store im not sure if I follow this pattern. Ok time for example.

My store is as follows:

``` javascript
class MyStore extends Store {

constructor(flux) {
super();
const actionIds = flux.getActionIds(FluxConst);
this.register(actionIds.middleNameChanged, this.onMiddleNameChanged);

this.state = {
person : Immutable.Map({ firstName:'John', lastName: 'Doe',middleName:''})
};
}
onMiddleNameChanged(newMiddleName){
this.setState(
{
person: this.state.person.set('middleName',newMiddleName)
});
}
}
```

The store holds a single person object represented using an immutable map.
Next is my view. This is a simple form showing the person with an input to set a middle name( the view is wrapped in a further up the chain).

``` javascript
const Component = React.createClass({
middleNameChanged: function(event) {
this.props.flux.getActions(FluxConst).middleNameChanged(event.target.value);;
},
savePerson(){
this.props.flux.getActions(FluxConst).savePerson();
},
render(){
return(


First name: {this.props.person.get('firstName')}


Surname: {this.props.person.get('surName')}


Please enter middlename:



Save me

);
}
});
```

And finally my action creator.

``` javascript
class MyActions extends Actions{
async savePerson(person){
return doSaveAjaxThatReturnsPromise(person);
}
middleNameChanged(middleName){
return middleName;
}
}
```

As you can see the action creator got two actions. One of them receiving an update when the user makes a change in the input.
The second actions is a "savePerson" actions.

Here is my problem. My store owns the state, so it seems to me that it should be the store that passes the "person to save" to the action creator. But in all examples following this pattern the data is passed from from "view" -> "action creator" -> "store". This makes my view responsible for passing data to the server, even though its my store thats the "owner" of this person.

My first take on this was to trigger a "saveRequest" action to the store and let the store trigger the "savePerson" action with the "true-person" as payload,b ut this also seems a bit of.
So right now im leaning against using the action creator for all the initial data fetching( using the component static method pattern from your doc app example) and performing the entire save/update inside the store.

Any ideas on how to handle this?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.