Bootstrap create-react-app with redux

bootstrap.md

yarn add redux react-redux redux-thunk redux-devtools-extension redux-logger immutable redux-immutable node-sass-chokidar

rm src/App* src/logo*

Create the store

// ./src/store.js

import { createStore, applyMiddleware, compose } from 'redux'
import Immutable from 'immutable'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootReducer from './reducer.js'

const initialState = Immutable.Map()
const middleware = [
  thunk,
  logger
]
const enhancers = []

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)

const store = createStore(
  rootReducer,
  initialState,
  composedEnhancers
)

export default store

Add main reducer

// ./src/reducer.js

import { combineReducers } from 'redux-immutable'

const changeMeReducer = (state = true, action) => state

export default combineReducers({
  test: changeMeReducer
})

Update ./src/index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import store from './store.js'

import './index.css'

const App = () => <h1>Up and running</h1>

const target = document.querySelector('#root')

render(
  <Provider store={store}>
    <div>
      <App />
    </div>
  </Provider>,
  target
)

Add css preprocessor to package.json

"scripts": {
  "build-css": "node-sass-chokidar src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  ...
}