Flux vs Redux: Creating the Warehouse.

In the last post, we learn how to create reducers and the rules that must be followed in order for the container to work correctly. Now is time to see how we request data from the components by itself.

First we need to configure our store, which is the container where all the state of the application would be.

1
2
3
4
5
6
7
8
9
10
11
12
import { applyMiddleware,createStore} from 'redux';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import reducers from '../reducers';
import thunk from 'redux-thunk';
export default function(initialState) {
const store = createStore(reducers, initialState,
applyMiddleware(thunk,reduxImmutableStateInvariant()),
);
return store
};

Here Im importing some required libraries in order to build the store.

First Im using from the redux library itself the modules applyMiddleware and createStore.

The module _applyMiddleware _allows you to execute any kind of functionality whenever the pipeline of redux is triggered out. Works pretty similar as the middleware pattern that follows Express.js whenever you develop HTTP endpoints.


Express Middleware from ExpressJs Web Site.

The _createStore _module is the one responsible for creating our container. Here it receives the list of reducers of the whole aplication,the optional initial state and any kind of middleware required to executed by placing it as an argument inside the applyMiddleware function.

The ones provided here come as npm packages, so you can find the ones that you need and just plug and play them on your app.In my case redux-inmutable-state-invariant allows to check that your state is not being mutated and redux-thunk is required as our API access uses the thunk pattern so we required redux to know about it.

The list of reducers would be the following one:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"use strict";
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux'
import booksReducer from '../reducers/books/booksReducer.js';
import selectedBook from '../reducers/books/selectedBookReducer.js';
import feedbacks from '../reducers/feedbacks/feedbacksReducer.js';
import feedbackDetails from '../reducers/feedbacks/feedbackDetailsReducer.js';
import positionReducer from '../reducers/position/positionReducer.js';
import positionDetails from '../reducers/position/positionDetailsReducer';
import ajaxReducer from '../reducers/common/ajaxReducer.js';
import candidatesReducer,* as fromCandidates from '../reducers/candidates/candidatesReducer';
const reducers = {
ajaxCallsInProgress:ajaxReducer,
books: booksReducer,
candidates:candidatesReducer,
selectedBook: selectedBook,
feedbacks: feedbacks,
positions: positionReducer,
positionDetails: positionDetails,
feedbackDetails: feedbackDetails,
routing: routerReducer
};
export default combineReducers(reducers);

Here Im importing all of my reducers, and merging them so all actions can be passed to every one of them and execute the proper state changes by using the module given by Redux which is the combineReducers.

Now that we have our store,reducers and actions created. We need to find a way where they can be acceses inside our components in HTML. Stay tunes I we will find it out on the next chapter.

Share