Tiếp cận nhà nước bên trong của phương pháp mapDispatchToProps

Question

Tôi đã viết một phần chai lọ bằng Redux và thực hiện của tôi cho mapDispathToProps trông như thế này

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     onChange: (newValue) => { 
      dispatch(updateAttributeSelection('genre', newValue)); 
      dispatch(getTableData(newValue, ownProps.currentYear)); 
     } 
    } 
} 

Vấn đề là để getTableData tôi cần tình trạng của một số thành phần khác. Làm cách nào tôi có thể truy cập đối tượng trạng thái trong phương thức này?

Answer 1

Bạn có thể sử dụng Redux-thunk để tạo ra một chức năng tạo hành động riêng biệt trong đó có quyền truy cập vào getState, chứ không phải là xác định các chức năng bên trong mapDispatchToProps:

function doTableActions(newValue, currentYear) { 
    return (dispatch, getState) => { 
     dispatch(updateAttributeSelection('genre', newValue)); 
     let state = getState(); 
     // do some logic based on state, and then: 
     dispatch(getTableData(newValue, currentYear)); 
    } 
} 


let mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     onChange : (newValue) => { 
      dispatch(doTableActions(newValue, ownProps.currentYear)) 
     } 
    } 
} 

Một số cách khác nhau để đi về việc tổ chức đó, nhưng cái gì đó như mà nên làm việc.

Answer 2

Bạn chỉ có thể sử dụng redux-thunk để nhận trạng thái. Viết một hàm helper như thế này:

const getState = (dispatch) => new Promise((resolve) => { 
    dispatch((dispatch, getState) => {resolve(getState())}) 
}) 

Bạn có thể sử dụng trong một hàm async hoặc máy phát chức năng:

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    async someFunction() { 
     const state = await getState(dispatch) 
     ... 
    } 
    } 
} 

Answer 3

cách tiếp cận có thể xảy ra cũng là sử dụng mergeProps rằng kết hợp mapState và mapDispatch và cho phép sử dụng Cả hai cùng một lúc.

// Define mapState 
const mapState = (state) => ({ 
    needeedValue: state.neededValue 
}) 

// Define mapDispatch 
const mapDispatch = (dispatch, ownProps) => { 
    return { 
    onChange: (newValue, neededValue) => { 
     dispatch(updateAttributeSelection('genre', newValue)); 
     dispatch(getTableData(newValue, ownProps.currentYear, neededValue)); 
    } 
    } 
} 

// Merge it all (create final props to be passed) 
const mergeProps = (stateProps, dispatchProps, ownProps) => { 
    return { 
    ...stateProps, // optional 
    ...dispatchProps, // optional 
    onChangeWithNeededValue: (newValue) => (
     dispatchProps.onChange(
     newValue, 
     stateProps.needeedValue // <<< here the magic happens 
    ) 
    ) 
    } 
} 

// Pass mergePros to connect 
const MyContainer = connect(mapState, mapDispatch, mergeProps)(MyComponent); 

tài liệu chính thức: react-redux#connect

có thể thực hiện nhược điểm trên các ứng dụng lớn hơn: Stack Overflow - Performances and mergeProps in Redux