TodoMVCReduxReact.js

// Action constant (File #1)
// constants/ActionTypes.js
export const ADD_TODO = 'ADD_TODO'

// Action creator (File #2)
// actions/index.js
export const addTodo = text => ({ type: types.ADD_TODO, text })

// Reducer (File #3)
// reducers/todos.js
export default function todos(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        {
          id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
          completed: false,
          text: action.text
        },
        ...state
      ]
      /* ... */
  }
}

// Root reducer (File #4)
// reducers/index.js
const rootReducer = combineReducers({
  todos
})

export default rootReducer

// Container component (File #5)
// containers/App.js
const mapStateToProps = state => ({
  todos: state.todos
})

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(TodoActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

// Actual component adding the Todo item (File #6)
// components/Header.js
handleSave = text => {
    if (text.length !== 0) {
      this.props.addTodo(text)
    }
  }