Building A Blog By React Ecosyst

It's time to add Redux to our project.

Even though we have typed so many codes but our web page shows nothing, don't worry , It's necessary to build a great project . After the scaffolding finished , we can create everything immediately .

Our index.js like that :

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import configureStore from './store';
import createRoutes from './routes';

const store = configureStore();

render((
  <Provider store={store}>
    {createRoutes(browserHistory)}
  </Provider>
),

document.getElementById('app'));

You can find from those codes that we need reducers and configureStore right?
So our work is created them.

./store/index.js


import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

export default function configureStore(initialState = {}) {
  const store = createStoreWithMiddleware(rootReducer, initialState);

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers'); // eslint-disable-line global-require
      store.replaceReducer(nextRootReducer);
    });
  }
}

It 's a function to create a store with some middlewares (now we have no any middlewares, but then we have ), and put the reducers together by rootReducer.
and when we use hot-loader it can auto fresh the reducers functions.

And we need reducers .

./reudcers/index.js

import { combineReducers } from 'redux';

const rootReducer = combineReducers(
  {}
);

export default rootReducer;

It holds nothing now. How we check it works?
We can find react-devtool from Chrome Plugins Store.
Using it we can easily confirm them work .

Next part we will create styles for app.