Комментарии 10
В новой версии react-redux эта проблема и другие похожие решается более элегантно через
connectAdvanced(selectorFactory, [connectOptions])https://github.com/reactjs/react-redux/blob/next/docs/api.md#connectadvancedselectorfactory-connectoptions
Там можно более гибко конфигурировать props для вложенного компонента.
Пример кода:
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'
function selectorFactory(dispatch) {
let state = {}
let ownProps = {}
let result = {}
const actions = bindActionCreators(actionCreators, dispatch)
const addTodo = (text) => actions.addTodo(ownProps.userId, text)
return (nextState, nextOwnProps) => {
const todos = nextState.todos[nextProps.userId]
const nextResult = { ...nextOwnProps, todos, addTodo }
state = nextState
ownProps = nextOwnProps
if (!shallowEqual(result, nextResult)) result = nextResult
return result
}
}
export default connectAdvanced(selectorFactory)(TodoApp)
А я в таких случаях обычно передаю срез нужного мне состояния из компонента, что-то типа onClick={(myState) => this.props.togglePlay(myState)}. Или так делать – bad practice?
Ну можно же передавать туда и просто свои props – тогда это ничем не будет отличаться от способа с mergeProps.
Ну можно же передавать туда и просто свои propsКуда «туда»? :)
Кстати, как у вас в примере 'myState' оказывается аргументом обработчика onClick? Там же SyntheticEvent.
В этом плане еще лучше, если компонент вообще не будет знать, откуда берутся props (из стейта, переданы вручную, и так далее)
Ну да, компонент знает только то, что мы ему передали в props. Но, соответственно, он может и передать в функцию-обработчик какую-то часть этих props.
Кстати, как у вас в примере 'myState' оказывается аргументом обработчика onClick? Там же SyntheticEvent.
Да, затупил, конечно же. Должно быть что-то такое:
onClick={(e) => this.props.togglePlay(this.props.play)}
const toggle = () => {
dispatch(togglePlay());
...
где объявлен togglePlay?
React Redux. Получение доступа к state из функции mapDispatchToProps()