Sony Arouje

a programmer's log

Posts Tagged ‘React’

react, redux and cycle – Introduction

leave a comment »

Last couple of months we were working mostly in react js to develop a flexible platform for one of the product we are working. I am planning to make a couple of post to explain how to start developing in react with redux and cycle. To setup my dev environment, I used the react boilerplate created by my friend Sendhil. This is a basic template to jumbstart react js development with linting.

I am not going in depth of redux or redux-cycle, it’s just an attempt to help setup the initial phase of the development. If you are not familiar with redux or why we need redux, better learn it from the creator.

Let’s use the template and incrementally add more features to it. I created a new github repository with some initial code to start with.

Below are the new npm dependencies added to package.json

  • react-redux: "^5.0.4",
  • redux: "^3.6.0",
  • @cycle/http: "^13.3.0",
  • @cycle/run: "^3.1.0",
  • @cycle/time: "^0.8.0",
  • redux-cycles: "^0.4.1",
  • xstream: "^10.9.0",
  • prop-types: "^15.5.10"

For any redux application we need to setup a store. I created a store as well, see the code below.

import { applyMiddleware, createStore, compose } from 'redux';
import { createCycleMiddleware } from 'redux-cycles';
import { run } from '@cycle/run';
import { makeHTTPDriver } from '@cycle/http';
import { timeDriver } from '@cycle/time';
import logger from 'redux-logger';

// combined all the reducers in the application 
import reducers from './reducers';
// combined all the cycles in the application
import cycles from './cycles';

//create cycle middleware to attach to redux store.
const cycleMiddleware = createCycleMiddleware();
const { makeActionDriver, makeStateDriver } = cycleMiddleware;

//we might use multiple middleware, here we used a logger
//and cycle. We can add more middleware by adding them to 
//the below array.
const middleWare = [
  logger,
  cycleMiddleware,
];

const initState = {};

// more about compose here http://redux.js.org/docs/api/compose.html
let composeEnhancers = compose;

// adding redux dev tool to visualize the store state.
// should be enabled only in development.
if (process.env.NODE_ENV !== 'production') {
  const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
  if (typeof composeWithDevToolsExtension === 'function') {
    composeEnhancers = composeWithDevToolsExtension;
  }
}

const store = createStore(
    reducers, // all the available reducers combined
    initState, // initial state of the reducers
    composeEnhancers( // adding store enchancers
     applyMiddleware(...middleWare), // attaching the middleware
    ),
  );

// calling cycle's run() we are activating the cycles that we created
// here all the different cycles are combined to one.
run(cycles, {
  ACTION: makeActionDriver(),
  STATE: makeStateDriver(),
  Time: timeDriver,
  HTTP: makeHTTPDriver(),
});

export default store;

 

Added some inline comments to the code and hopefully it’s pretty self explanatory. Once we have the store created, we need to pass down the store to other components, so that they can access state or dispatch actions.

Let’s edit index.jsx and add the below code.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/create-store';
import App from './App';

render(
  <Provider store={store}>
    <App />
  </Provider>
, document.getElementById('root'));

 

Great, we created a basic react app with redux. In next post I will cover how to create reducer and handle side effects using redux-cycle.

 

Happy coding…

Written by Sony Arouje

September 22, 2017 at 6:32 pm

Posted in JavaScript, React

Tagged with , ,