javascript - React Redux - passing props with actions -


i have simple component i'd toggle depending on props. code looks follows:

actions.js

const toggletodo = (id) => {   return {     type: 'todoitem__toggle_todo',     id   } };  export {   toggletodo } 

component.js

import react 'react';  const todoitem = (props) => {   const completed = props.isdone === true ? 'done' : '';    return (     <li classname={completed} id={props.id} onclick={props.toggle}>{props.text}</li>   ); }  export default todoitem; 

container.js

import { connect } 'react-redux'; import component './component'; import * actions './actions';  const mapstatetoprops = (state) => {   return state; };  const mapdispatchtoprops = (dispatch) => {   return {     toggle: (id) => { dispatch(actions.toggletodo(id)); }   } };  const todoitem = connect(   mapstatetoprops, mapdispatchtoprops )(component);  export default todoitem; 

reducers.js

const todoitemreducer = (state = [], action) => {   switch (action.type) {     case 'todoitem__toggle_todo':       console.log(action.id);       return state;   }    return state; };  export default todoitemreducer; 

index.js

import react 'react'; import { render } 'react-dom'; import { provider } 'react-redux'; import { createstore } 'redux';  import todoitem './components/todoitem/container';  import reducers './reducers';  const store = createstore(reducers, window.devtoolsextension && window.devtoolsextension());  render(   <provider store={store}>     <todoitem key="1" isdone={false} text="test" id="1" />   </provider>,   app ); 

reducers.js

import { combinereducers } 'redux';  // reducers import todoitemreducer './components/todoitem/reducers';  const reducers = combinereducers({   todoitemreducer });  export default reducers; 

when run , click on said component, console returns event object. can pass there?

please note used onclick={() => { props.toggle(props.id) }} before, don't think proper way.

mapstatetoprops needs select single todo based on props (an id prop exact). have create reducer todo items (plural!). reducer calls 1 single item reducer. should @ standard redux todo example need.

note in example there 2 reducers, 1 list of reducers , 1 single reducer.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -