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
Post a Comment