Redux

What Redux is

Where does it come from?

Apply the one-way data flow of React into state management

What makes Redux?

Root reducers

Create the root reducer 

  // ****   reducers.js ****

import { SET_SEARCH_TERM } from './actions'

// 1. ++++ add the default state
const DEFAULT_STATE = {
  searchTerm: 'something random'
}

// 2. ++++ create the root reducer
// have to provide a base state
// ES6 default parameter, same as 
// state = state || DEFAULT_STATE
const rootReducer = (state = DEFAULT_STATE, action) => {
  // the base logic of Redux
  // every action must have a type
  // type decides to which reducer 
  // you route to
  switch (action.type) {
      // always have a default action
    default:
    // state is the base for Redux
      return state
  }
}

export default rootReducer

​combineReducers​

The Store

  // ****   store.js    ****

import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer)

export default store

Talks about ES6 modules. The exports are not named exports, so you can do:

  export default = createStore(rootReducer)

And also:

  import blah from './reducers'

And also:

  import { createStore as foo } from 'redux'

Back:

Modify the Store

  // ****   actions.js    ****

export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'

For now, actions has no logic. The names of the actions are now in one central place. Great for maintainability. 

  // ****     actionCreators.js   ****

// import named export
import { SET_SEARCH_TERM } from './actions'

export function setSearchTerm (searchTerm) {
  return { type: SET_SEARCH_TERM, searchTerm: searchTerm }
}

Again, you keep the actions in a separate, central place so your UI can use it without knowing the implementation details. 

Prepare Reducers for the newly defined actions

  // ****   reducers.js   ****

// 1. ++++
import { SET_SEARCH_TERM } from './actions'

const DEFAULT_STATE = {
  searchTerm: 'something random'
}

// 3. ++++
const setSearchTerm = (state, action) => {
  const newState = {}
  Object.assign(newState, state, {searchTerm: action.searchTerm})
  return newState
}

const rootReducer = (state = DEFAULT_STATE, action) => {
  switch (action.type) {
    // 2. ++++
    case SET_SEARCH_TERM:
      // dispatch to another action
      return setSearchTerm(state, action)
    default:
      return state
  }
}

export default rootReducer

The anatomy of a reducer

Most reducers follow the same pattern as the ​setSearchTerm​ reducers above (using ​Object.assign(...)​).

Connect the UI to use the Redux state

  // ****  ClientApp.js    ****
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Match } from 'react-router'
// 1. ++++ import the libraries
// react-redux and store
import { Provider } from 'react-redux'
import store from './store'
import Landing from './Landing'
import Search from './Search'
import Details from './Details'
import preload from '../public/data.json'
import '../public/normalize.css'
import '../public/style.css'

const App = React.createClass({
  render () {
    return (
      <BrowserRouter>
      // 2. ++++ add the provider
      // and define the store
        <Provider store={store}>
          <div className='app'>
            <Match exactly pattern='/' component={Landing} />
            <Match
              pattern='/search'
              component={(props) => <Search shows={preload.shows} {...props} />}
            />
            <Match
              pattern='/details/:id'
              component={(props) => {
                ...
              }}
            />
          </div>
        </Provider>
      </BrowserRouter>
    )
  }
})

render(<App />, document.getElementById('app'))

react-redux is a very small utility. It connects your app to Redux.

  // ****   Landing.js    ****

import React from 'react'
// 1. ++++
import { connect } from 'react-redux'
import { Link } from 'react-router'
const { string } = React.PropTypes

// 4. ++++ finally document the proptypes
const Landing = React.createClass({
  propTypes: {
    searchTerm: string
  },
  render () {
    return (
      <div className='landing'>
        <h1>svideo</h1>
        // 5. ++++ use the searchTerm prop
        <input value={this.props.searchTerm} type='text' placeholder='Search' />
        <Link to='/search'>or Browse All</Link>
      </div>
    )
  }
})

// 2. ++++
const mapStateToProps = (state) => {
  // just return the searchTerm from the 
  // entire Redux store
  return {
    searchTerm: state.searchTerm
  }
}

// 3. ++++ then the magic here
// connect the returned state to props
// connect returns a function that we call immediately
export default connect(mapStateToProps)(Landing)

Now we have connected Redux to Landing.