Organizing Redux

Objectives

  • Define a presentational component vs a container component

  • Define combine reducers

  • Define action creators

  • Describe a folder structure for redux

Presentational Component

A component that is primarily concerned with how things look

It is often a stateless functional component, but does have to be

Container Component

Usually a stateful component that deals with application data

Often created using higher order components like connect or withRouter

Dan Abramov's

Presentational And Container Components

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

combineReducers

A redux function that allows for reducer composition

Each reducer is only responsible for its piece of the entire state object

import {combineReducers} from 'redux';
import currentUser from './currentUser';
import messages from './messages';

const rootReducer = combineReducers({
  currentUser,
  messages,
});

export default rootReducer;

combineReducers

const messages = (state=[], action) => {
  switch(action.type) {
    case "LOAD_MESSAGES":
      return [...action.messages];
    case "ADD_MESSAGE":
      return [action.message, ...state];
    default:
      return state;
  }
};

export default messages;

Messages Reducer

Action Creators

A function that returns an action object

const mapDispatchToProps = dispatch => ({
  onLogout() {
    dispatch({
      type: "USER_LOGOUT"
    })
  },
});
const mapDispatchToProps = dispatch => ({
  onLogout() {
    dispatch(actions.userLogout())
  },
});

Redux Directory Structure

actions

components

containers

reducers

src

index.js