Chuyển đạo cụ tới thành phần thùng phản ứng-redux

Question

Tôi có thành phần thùng chứa phản ứng redux được tạo trong thành phần Bộ điều hướng gốc phản ứng. Tôi muốn để có thể vượt qua các hoa tiêu như một prop để thành phần container này để sau khi một nút được nhấn bên trong thành phần presentational của nó, nó có thể đẩy một đối tượng vào ngăn xếp navigator.

Tôi muốn làm điều này mà không cần phải viết tay tất cả mã boilerplate mà thành phần thùng chứa phản ứng redux mang lại cho tôi (và cũng không bỏ lỡ tất cả các tối ưu mà phản ứng-redux sẽ cung cấp cho tôi ở đây).

Ví dụ mã thành phần container:

const mapStateToProps = (state) => { 
    return { 
     prop1: state.prop1, 
     prop2: state.prop2 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSearchPressed: (e) => { 
      dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator 
     } 
    } 
} 

const SearchViewContainer = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(SearchView) 

export default SearchViewContainer 

Và tôi muốn để có thể gọi các thành phần như thế này từ bên trong chức năng navigator renderScene tôi:

<SearchViewContainer navigator={navigator}/> 

Trong đoạn mã chứa trên, Tôi cần có khả năng truy cập vào bộ phận được truyền từ bên trong chức năng mapDispatchToProps.

Tôi không ưa thích lưu trữ trình điều hướng trên đối tượng trạng thái redux và không muốn chuyển phần tử xuống thành phần presentational.

Có cách nào để tôi có thể vượt qua đề xuất cho thành phần vùng chứa này không? Ngoài ra, có cách tiếp cận thay thế nào khác mà tôi đang xem không?

Cảm ơn.

Answer 1

mapStateToProps và mapDispatchToProps cả mất ownProps như là đối số thứ hai.

[mapStateToProps(state, [ownProps]): stateProps] (Function): 
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 

Đối reference

Answer 2

Bạn có thể vượt qua trong một cuộc tranh luận thứ hai để mapStateToProps(state, ownProps) mà sẽ cung cấp cho bạn truy cập vào các đạo cụ chuyển vào thành phần trong mapStateToProps

Answer 3

Nếu bạn đang sử dụng trang trí, mã dưới đây đưa ra một ví dụ trong trường hợp bạn muốn sử dụng trang trí cho Redux của bạn kết nối.

@connect(
    (state, ownProps) => { 
     return { 
      Foo: ownProps.Foo, 
     } 
    } 
) 
export default class Bar extends React.Component { 

Nếu bây giờ bạn kiểm tra this.props.Foo bạn sẽ thấy những chỗ dựa mà đã được bổ sung từ nơi thành phần Bar được sử dụng.

<Bar Foo={'Baz'} /> 

Trong trường hợp này this.props.Foo sẽ là chuỗi 'Baz'

Hy vọng điều này làm rõ một số điều.