redbooth / backbone-redux Goto Github PK
View Code? Open in Web Editor NEWEasy way to keep your backbone collections and redux store in sync.
License: MIT License
Easy way to keep your backbone collections and redux store in sync.
License: MIT License
Now on every update changed models are removed from the entities
array and updated ones are added to the end of it. This forces user to do a sorting by id (or any other field in the view layer).
It will be great to preserve the initial order of the models on an update.
Ie, this code should pass:
const testSaveOrder = () => {
const initialStore = [
{id: 1, name: 'lol'},
{id: 2, name: 'lol2'},
{id: 3, name: 'lol3'},
];
const newStore = mergeStore(
initialStore,
[
{id: 2, name: 'lol22'},
{id: 4, name: 'lol4'}
]
);
expect(newStore).toEqual([
{id: 1, name: 'lol'},
{id: 2, name: 'lol22'},
{id: 3, name: 'lol3'},
{id: 4, name: 'lol4'}
]);
};
testSaveOrder();
If you have a store with reducers already defined, syncCollection
will overwrite them.
It'd be nice if backbone-redux was a bit more friendly to the Redux API.
I guess the main problem is that backbone-redux need to have an handle on the dispatch method. So maybe backbone-redux could be a middleware:
compose(syncCollections({...conf}))(createStore)
Do you have any plans to add synchronizations in both ways?
Right now, if collection is changed, then store is updated properly. The case to update collection when store is changed is not handled at all, and it seems to be very useful as well.
It'd be great if we could define the relations map as a function too.
For example, we might want to process data in our model to generate the actual key. For example, we might want to time related data by days, and to do so we'd parse an ISO timestamp to YYYY-MM-DD
string.
Now we are calling merge
on reset action, but what we really should doing is clear the store for this collection and then do add for a new models.
The edge case is when you store multiple collection in one tree branch (which is not the case for the auto-way, but could be in manual one), so need to think about useful helpers
For now when you call a syncCollection
there is no way to specify what indexes to build, we need to change that.
Possible API to consider:
syncCollection({
myCollection1: {
collection: Backbone.Collection,
indexesMap: {
fields: {
byId: 'id'
},
relations: {
byRelationId: 'relation_id'
}
},
myCollection2: {...}
});
If you're using backbone-redux in your project, please leave a comment about your experience and problems that you've solved. It will be very interesting to know how you're using backbone + redux and to hear your war stories. Especially if you're using it in some custom and not very automatic way.
Could you add a filter example to your documentation? I'm going to have to find my own implementation due to time constraints, but I would like to see what you think is the correct way to structure a filter w/backbone-redux.
Filter Example: Show Only Completed Todos, or Show Only Open Todos
This could apply to sorts as well, so basically how best to work with flags on backbone collections?
Thanks, this is a solid Lib.
WB
Hi,
I've tried running as per Auto example, but I'm getting a console error on init:
Uncaught TypeError: (0 , _reduxDevtools.devTools) is not a function
for:
const finalCreateStore = compose(devTools())(createStore);
Ive used the example auto setup. I figure its to do with the Redux/React versions.
I've tried to match the versions to what you have:
"redux": "^3.0.0",
"redux-devtools": "^3.4.0"
Cheers
Gary
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.