basic-redux.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

// Action creator
const toggleTodo = isChecked => ({
  type: 'TOGGLE_TODO',
  isChecked,
});

// Initial application state
const initialState = {
  isChecked: false,
};

// Reducer
const todo = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_TODO':
      return {
        ...state,
        isChecked: action.isChecked,
      };
    default:
      return initialState;
  }
};

// A view that connects to the Reducer
export default function CheckboxContainer() {
  const Todos = props => (
    <div>
      <h2>This is my Todo: is it completed? {props.isChecked}</h2>
      <input
        type="checkbox"
        value={props.isChecked}
        onChange={() => toggleTodo(!props.isChecked)}
      />
    </div>
  );

  Todos.propTypes = {
    isChecked: PropTypes.boolean.isRequired,
  };

  return connect(
    state => ({
      todos: state.todos,
    }),
    { toggleTodo },
  );
}