Previously, we wrote the Provider component by ourself:

class Provider extends Component {  getChildContext() {    return {      store: this.props.store    };   }  render() {    return this.props.children;  }}Provider.childContextTypes = {  store: React.PropTypes.object};

 

Then we can get 'store' from the 'context' from each child container component:

class VisibleTodoList extends Component {  componentDidMount() {    const { store } = this.context;    this.unsubscribe = store.subscribe(() =>      this.forceUpdate()    );  }    componentWillUnmount() {    this.unsubscribe();  }    render() {    const props = this.props;    const { store } = this.context;    const state = store.getState();        return (      
     
                store.dispatch({            type: 'TOGGLE_TODO',            id          })                    }      />    );  }}VisibleTodoList.contextTypes = {  store: React.PropTypes.object};
     

 

or Persentiaonal component:

const AddTodo = (props, { store }) => {  let input;  return (    
     
      
       {        input = node;      }} />      
       {        store.dispatch({          type: 'ADD_TODO',          id: nextTodoId++,          text: input.value        })        input.value = '';      }}>        Add Todo          
     
  );};AddTodo.contextTypes = {  store: React.PropTypes.object};

 

Because the solution is so convenient, we can use library instead of writing our own Provider:

So we can remvoe all the whole Provider class component, instead of we do:

const {Provider} = ReactRedux;

In html:

 

---------

Code:

const todo = (state, action) => {  switch (action.type) {    case 'ADD_TODO':      return {        id: action.id,        text: action.text,        completed: false      };    case 'TOGGLE_TODO':      if (state.id !== action.id) {        return state;      }      return {        ...state,        completed: !state.completed      };    default:      return state;  }};const todos = (state = [], action) => {  switch (action.type) {    case 'ADD_TODO':      return [        ...state,        todo(undefined, action)      ];    case 'TOGGLE_TODO':      return state.map(t =>        todo(t, action)      );    default:      return state;  }};const visibilityFilter = (  state = 'SHOW_ALL',  action) => {  switch (action.type) {    case 'SET_VISIBILITY_FILTER':      return action.filter;    default:      return state;  }};const { combineReducers } = Redux;const todoApp = combineReducers({  todos,  visibilityFilter});const { Component } = React;const Link = ({  active,  children,  onClick}) => {  if (active) {    return {children};  }  return (     {         e.preventDefault();         onClick();       }}    >      {children}      );};class FilterLink extends Component {  componentDidMount() {    const { store } = this.context;    this.unsubscribe = store.subscribe(() =>      this.forceUpdate()    );  }    componentWillUnmount() {    this.unsubscribe();  }    render() {    const props = this.props;    const { store } = this.context;    const state = store.getState();        return (      
               store.dispatch({            type: 'SET_VISIBILITY_FILTER',            filter: props.filter          })        }      >        {props.children}          );  }}FilterLink.contextTypes = {  store: React.PropTypes.object};const Footer = () => (  
    Show:    {
    ' '}    
      
             All    
          {', '}    
      
             Active    
          {', '}    
      
             Completed    
        
);const Todo = ({  onClick,  completed,  text}) => (  
    {text}  
);const TodoList = ({  todos,  onTodoClick}) => (  
     
          {todos.map(todo =>      
      
        onTodoClick(todo.id)}      />    )}  
      
     
);let nextTodoId = 0;const AddTodo = (props, { store }) => {  let input;  return (    
     
      
       {        input = node;      }} />      
       {        store.dispatch({          type: 'ADD_TODO',          id: nextTodoId++,          text: input.value        })        input.value = '';      }}>        Add Todo          
     
  );};AddTodo.contextTypes = {  store: React.PropTypes.object};const getVisibleTodos = (  todos,  filter) => {  switch (filter) {    case 'SHOW_ALL':      return todos;    case 'SHOW_COMPLETED':      return todos.filter(        t => t.completed      );    case 'SHOW_ACTIVE':      return todos.filter(        t => !t.completed      );  }}class VisibleTodoList extends Component {  componentDidMount() {    const { store } = this.context;    this.unsubscribe = store.subscribe(() =>      this.forceUpdate()    );  }    componentWillUnmount() {    this.unsubscribe();  }    render() {    const props = this.props;    const { store } = this.context;    const state = store.getState();        return (      
     
                store.dispatch({            type: 'TOGGLE_TODO',            id          })                    }      />    );  }}VisibleTodoList.contextTypes = {  store: React.PropTypes.object};const TodoApp = () => (  
      
    
           
           
       
  
      
);const {Provider} = ReactRedux;const { createStore } = Redux;ReactDOM.render(  
          
         
      ,  document.getElementById('root'));