React — Communicate between components with Redux

Let’s say we have two pages named “Sender” and “Getter” and our “App” where we call other two pages.

As you can understand from their names, the sender will send the data, and the getter will get it. Then we will try to show them in a single page.

First we need to create an action creator to get the data.

project/imports/redux/actionCreator.js

actionCreator.js

We define a constant function called getData inside our actionCreator file.

It will return a string(“getData”) named “type” and the data named “data”.We will use it’s type later on.

Now we need a reducer.

project/imports/redux/reducer.js

actionCreator.js

This reducer returns a data based on the state’s type.For example if the state’s type is “getData” it will return the type and the data.

So we can get different informations using the same component by changing the type.

project/imports/ui/Getter.jsx

actionCreator.js

mapStateToProps defines which part of the data “Getter” needs.

Up there we told it needs the “data” part of the state.

Any change in store state will call this function. Everytime.

Then we export it with the connect function.With the second parameter as null. Because we don’t send anything.

project/imports/ui/Sender.jsx

actionCreator.js

We have an input area in our page. We want to send the data that is given in the input area.That’s what handleChange function does. We define the sendData function below.

MapDispatchToProps triggers state changes.

Then we export it using the connect function with the first argument as null, because we don’t get anything.We just send.

* Last thing we should do is to create a store and a provider.

Provider gives store access to the nested components that have been in connect() function.

project/client/main.html

actionCreator.js

project/client/main.jsx

actionCreator.js

I built this application with meteor.I want it to create a store when meteor starts.

I used createStore function to create a store named “store”.

And gave access to the store with the provider. Inside the provider I called the App. And render it into the element with the “react-target” id.

project/imports/ui/App.jsx

actionCreator.js

So, whenever I type something in the input field of sender, it will send it to the Getter.

aaand voila.

actionCreator.js