React Reduce - アクションで小道具を渡す

Question

私はその小道具に応じてトグルする簡単なコンポーネントを持っています。コードは次のようになります。

は

const toggleTodo = (id) => { 
    return { 
    type: 'TODOITEM__TOGGLE_TODO', 
    id 
    } 
}; 

export { 
    toggleTodo 
} 

component.jsをactions.js

import React from '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 } from 'react-redux'; 
import component from './component'; 
import * as actions from './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 from 'react'; 
import { render } from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 

import TodoItem from './components/TodoItem/container'; 

import reducers from './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 } from 'redux'; 

// Reducers 
import todoItemReducer from './components/TodoItem/reducers'; 

const reducers = combineReducers({ 
    todoItemReducer 
}); 

export default reducers; 

私は、コンソールに戻りますが、これを実行したコンポーネントをクリックeventオブジェクトです。そこに何かを渡すために私は何ができますか？

以前はonClick={() => { props.toggle(props.id) }}を使用していましたが、これは適切な方法ではないと思います。

Answer 1

mapStateToPropsは、小道具に基づいて1つのtodoを選択する必要があります（正確には、小道具です）。また、ToDo項目（複数形！）用の減速機を作成する必要があります。この減速機は、単一の減速機に対するものを呼び出す。あなたは必要なすべてを行う標準Redux todo exampleを見てください。

例では、2つの減速器があります.1つは減速器のリスト用で、もう1つは単一の減速器用です。 `action.id`は（あなたの例では、` action.payload`が） `である -

Answer 2

reducers.jsは、私がこれをやっているisDoneに

const todoItemReducer = (state = [], action) => { 
     switch (action.type) { 
     case 'TODOITEM__TOGGLE_TODO': 
      console.log(action.id); 
      return { 
      isDone: !state.isDone 
     }; 
     } 

     return state; 
    }; 

    export default todoItemReducer; 

container.js

import { connect } from 'react-redux'; 
import component from './component'; 
import * as actions from './actions'; 

const mapStateToProps = (state) => { 
    return { 
isDone: state.isDone 
}; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    toggle: (id) => { dispatch(actions.toggleTodo(id)); } 
    } 
}; 

const TodoItem = connect(
    mapStateToProps, mapDispatchToProps 
)(component); 

export default TodoItem; 

component.js 

import React from 'react'; 

const TodoItem = (props) => { 
    const completed = props.isDone === true ? 'done' : ''; 

    return (
    <li className={completed} id={props.id} onClick={props.toggle.bind(this,props.id}>{props.text}</li> 
); 
} 

export default TodoItem;