[Redux] Generating Containers with Connect () from React Redux (Footerlink)

Code to be refactored:

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 (      < Linkactive         ={Props.filter===State.visibilityfilter} onClick ={() =Store.dispatch ({type:' Set_visibility_filter ', Filter:props.filter}) }      >{Props.children}</Link>    ); }}filterlink.contexttypes={store:React.PropTypes.object};

First to create Mapstatetoprops, It's fairly common to use the container props when calculating the child props is, props is passed as a second argument:

Const MAPSTATETOLINKPROPS = (state  ,  = =  {return  {    = = = =)  State.visibilityfilter  }}

Second, we need to write Mapdispatchtoprop function:

Const MAPDISPATCHTOLINKPROPS = (  dispatch,  = =  {return  {    = > {      dispatch ({            ' set_visibility_filter ',            filter:ownProps.filter          })    }  }}

Last, we need to create connect function, point to the Link compoment:

Const Filterlink = connect (Mapstatetolinkprops, Mapdispatchtolinkprops) (Link);

We can now use the Filter Link container component and specify just the filter, but the underlying link component would hav E received the calculated active and On-click values.

-------------

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) {returnState ; }      return{... state, completed:!state.completed}; default:      returnState ; }};const Todos= (state = [], action) = = {  Switch(action.type) { Case' Add_todo ':      return[... state, Todo (undefined, action)];  Case' Toggle_todo ':      returnState.map (t =Todo (T, action)); default:      returnState ; }};const Visibilityfilter=( State= ' Show_all ', Action)= {  Switch(action.type) { Case' Set_visibility_filter ':      returnAction.filter; default:      returnState ; }};const {combinereducers}=Redux;const Todoapp=combinereducers ({todos, visibilityfilter}); const {Component}=React;const Link=({active, OnClick, Children,})= {  if(active) {return<span>{children}</span>;  }  return (    <a href= ' # 'OnClick={e ={e.preventdefault ();       OnClick (); }}    >{Children}</a>  );}; const {Connect}=Reactredux;const Mapstatetolinkprops=(State, Ownprops)= {  return{Active:ownProps.filter===State.visibilityfilter}} Const Mapdispatchtolinkprops=(Dispatch, Ownprops)= {  return{onClick: ()={Dispatch ({type:' Set_visibility_filter ', Filter:ownProps.filter}) }}}const Filterlink=Connect (Mapstatetolinkprops, Mapdispatchtolinkprops) (Link); Const Footer= () + = (  <p>Show: {‘ ‘}    <filterlink filter= ' Show_all ' > All</FilterLink> {', '}    <filterlink filter= ' show_active ' >Active</FilterLink> {', '}    <filterlink filter= ' show_completed ' >completed</FilterLink> </p>); Const Todo=({onClick, completed, text})= (  <Li OnClick={OnClick} style={{textdecoration:completed? ' Line-through ' :          ' None '    }}  >{text}</li>); Const ToDoList=({todos, ontodoclick})= (  <ul>{todos.map (Todo= <Todo Key={todo.id} {... todo} onClick={() =Ontodoclick (todo.id)}/>    )}  </ul>); let Nexttodoid= 0; let Addtodo= ({dispatch}) = ={let input; return (    <div> <input Ref={node ={input=node; }} /> <button onclick={() ={Dispatch ({type:' Add_todo ', Id:nexttodoid++, Text:input.value}) Input.value= ' '; }}>ADD Todo</button> </div>  );}; Addtodo=Connect () (Addtodo); Const Getvisibletodos=(todos, filter)= {  Switch(filter) { Case' Show_all ':      returnTodos;  Case' Show_completed ':      returnTodos.filter (t=t.completed);  Case' Show_active ':      returnTodos.filter (t= =!t.completed); }}const Mapstatetotodolistprops= (state) = = {  return{Todos:getvisibletodos (State.todos, State.visibilityfilter)};}; Const Mapdispatchtotodolistprops= (dispatch) = = {  return{ontodoclick: (ID)={Dispatch ({type:' Toggle_todo ', id}); }  };}; Const Visibletodolist=Connect (Mapstatetotodolistprops, Mapdispatchtotodolistprops) (todolist); Const Todoapp= () + = (  <div> <addtodo/> <visibletodolist/> <footer/> </div>); const {Provider}=reactredux;const {CreateStore}=Redux; Reactdom.render (<provider Store={createstore (todoapp)}> <todoapp/> </provider>, document.getElementById (' root '));

<!DOCTYPE HTML><HTML><Head>  <MetaCharSet= "Utf-8">  <title>JS Bin</title>  <Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js"></Script>   <Scriptsrc= "Https://fb.me/react-0.14.0.js"></Script>  <Scriptsrc= "Https://fb.me/react-dom-0.14.0.js"></Script>  <Scriptsrc= "Https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js"></Script></Head><Body>  <DivID= ' root '></Div></Body></HTML>

[Redux] generating Containers with connect () from React Redux (footerlink)