Does anyone have experience with connecting redux with something like django and a relational db?
Mainly I want to be able to load data from the database into the initialState object needed to create a redux store without having to use an ajax call.
Any suggestions/ideas?
Redux is not related to any kind of backend by default, and it is not its purpose.
Redux is a tool to manage a store in the app, not to store or fetch information.
The way you fetch information from an external source and put it to redux is up to you. Most people use an API to do so, so with Django you could either set up manually an API or take a look at Django Rest Framework that will bring you a nice API easily.
The way you will connect Redux and the API is through Async actions, probably with thunk middleware (see the redux doc here). To load data at the page load, just dispatch the action to fetch the data at the start of your app.
You could also take a look at graphQL qhich is another way to connect your store data with a database. For Django the app to do so is Graphene. This setup might be very powerful but it is probably longer to set up and more recent so less bullet proff and subject to change. IN addition, APIs could also be used by more apps than graphQL. But GraphQL has the advantage of being much more flexible and easy to adapt once set up.
So this is how I ended up doing it, it's pretty hacky so I'm open to other ways but I wanted to see how performance would differ between an API call for initial load vs using the django framework to load. Still haven't gotten to testing the difference since I'm still writing the API call actions and reducer but I'll update when I do get around to that.
{% block content %}
<div id="root"></div>
<script>
var Trainee = '{{trainee}}';
var Events = JSON.parse('{{events_bb}}'.replace(/"/g,'"'));
</script>
<script type="text/javascript" src="{% static "js/date_fns.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/underscore-min.js" %}"></script>
<script type="text/javascript" src="{% static "js/moment.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/index.js" %}"></script>
{% endblock %}
Then in my initialState.js file
var trainee = Trainee;
var events = Events;
var initialState = {
trainee: trainee,
events: events,
};
module.exports = initialState;