rvr_actions_example_1.jsx

const SAVE_TODO = 'SAVE_TODO'
export function saveTodo(todo) {    
   return {
     type: SAVE_TODO,
     payload: todo
   };
}

rvr_app_example_3.jsx

// Other imports...
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import promiseMiddleware from 'redux-promise-middleware'

import todoReducer from './store/reducers'

const store = createStore(todoReducer, applyMiddleware([promiseMiddleware]))ReactDOM.render(
  <Provider store={store}> { }
    <App />
  </Provider>,
  document.getElementById('root')
)

rvr_consumer_example_7.jsx

import React, { Component } from 'react
import TodoContext from './path/to/todo-context';

export const Header = (props) => {
return (<div className='header-wrap'>
    <h1 className='header-h1'>{props.value}</h1>
</div>)
}

const Card = (props) => {
return (<div className='card-container'>
    <div className='img-container'>
      <img src={props.src} alt='card-img' />
    </div>
    <Header value={props.title} />
    <div className='desc-wrap'>
      <p>{props.description}</p>
    </div>
</div>)}

class TodoContainer extends Component {
   render () {
     return (<TodoContext.Consumer>{context => (
     <div className='todo-container'>
        {context.todos.map(todo) => {
          return (<Card key={todo.id} title={todo.title}
                    description={todo.description}
              />)
        }
     }</div>)}
     </TodoContext.Consumer>)
   }
}

rvr_context_management_example_8.jsx.jsx

import TodoContext from './todo-context';

class App extends Component {
  state = {
    todos: [
      { id: 1091293, title: 'order groceries', description: 'something'},
      { id: 1093123, title: 'book a cab', description: 'some other thing'}
    ]
  }

  saveTodo = todo => {
    const updatedTodos= [...this.state.todos];
    // logic to add the todo
    this.setState({ todos: updatedTodos });
  }

 removeTodo = todo => {
    const updatedTodos = [...this.state.todos];
    // logic to remove todo
    this.setState({ todos: updatedTodos });
  };
  
 render() {
    return (
      <TodoContext.Provider
        value={{
          todos: this.state.todos,
          saveTodo: this.saveTodo,
          removeTodo: this.removeTodo
        }}
      >
        ...
      </TodoContext.Provider>
    );
  }
}

export default App;

rvr_create_context_5.js

import React from 'react'export default React.createContext({})

rvr_provider_example_6.jsx

// Other imports...
import TodoContext from './path/to/todo-context'; // The path to the file where you called React.createContext()

class App extends Component {
  render() {
    return (
      <TodoContext.Provider value={{
          todos: []
        }
      }>
        {/*  Any child or child of a child component in here can access 'TodoContext'*/}
      </TodoContext.Provider />
    );
  }
}

rvr_reducer_example_2.jsx

const initialState = {
  todos: [
    { id: 1091293, title: 'order groceries', description: 'something'},
    { id: 1093123, title: 'book a cab', description: 'some other thing'},
    // ...
  ]
}
const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case SAVE_TODO:
      // todo updating logic
      return { ...state, todos: updatedTodos }
    case REMOVE_TODO:
      // todo updating logic
      return { ...state, todos: updatedTodos }
    default:
      return state
  }
}

rvr_todo_component_4.jsx

import React, { Component } from 'react


export const Header = (props) => {
return (<div className='header-wrap'>
    <h1 className='header-h1'>{props.value}</h1>
</div>)
}

export const Card = (props) => {
  return (<div className='card-container'>
      <div className='img-container'>
        <img src={props.src} alt='card-img' />
      </div>
      <Header value={props.title} />
      <div className='desc-wrap'>
        <p>{props.description}</p>
      </div>
    </div>)
}

class TodoContainer extends Component {
   render () {
     return (
     <div className='todo-container'>
     {this.props.todos.map(todo) => {
       return (<Card key={todo.id} title={todo.title}
                    description={todo.description}
              />)
      }
     }</div>)
   }
}
const mapStateToProps = state => {
  return {
    todos: state.todos
  }
}
               
const mapDispatchToProps = dispatch => {
  return {
    saveTodo: (todo) => dispatch(saveTodo(todo)),
    removeTodo: (todo) => dispatch(removeTodo(todo))
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoContainer)