Làm cách nào để truy cập trạng thái bên trong bộ giảm tốc Redux?

Question

Tôi có bộ giảm tốc và để tính toán trạng thái mới, tôi cần dữ liệu từ hành động và dữ liệu từ một phần của trạng thái không được trình giảm tốc này quản lý. Cụ thể, trong trình giảm tốc tôi sẽ hiển thị bên dưới, tôi cần quyền truy cập vào trường accountDetails.stateOfResidenceId.

initialState.js:

export default { 
    accountDetails: { 
     stateOfResidenceId: '', 
     accountType: '', 
     accountNumber: '', 
     product: '' 
    }, 
    forms: { 
     blueprints: [ 

     ] 
    } 
}; 

formsReducer.js:

import * as types from '../constants/actionTypes'; 
import objectAssign from 'object-assign'; 
import initialState from './initialState'; 
import formsHelper from '../utils/FormsHelper'; 
export default function formsReducer(state = initialState.forms, action) { 
    switch (action.type) { 
    case types.UPDATE_PRODUCT: { 
     //I NEED accountDetails.stateOfResidenceId HERE 
     console.log(state); 
     const formBlueprints = formsHelper.getFormsByProductId(action.product.id); 
     return objectAssign({}, state, {blueprints: formBlueprints}); 
    } 

    default: 
     return state; 
    } 
} 

index.js (root giảm):

import { combineReducers } from 'redux'; 
import accountDetails from './accountDetailsReducer'; 
import forms from './formsReducer'; 

const rootReducer = combineReducers({ 
    accountDetails, 
    forms 
}); 

export default rootReducer; 

Tôi làm cách nào để truy cập trường này?

Answer 1

Tôi sẽ sử dụng thunk cho điều này, đây là một ví dụ:

export function updateProduct(product) { 
    return (dispatch, getState) => { 
    const { accountDetails } = getState(); 

    dispatch({ 
     type: UPDATE_PRODUCT, 
     stateOfResidenceId: accountDetails.stateOfResidenceId, 
     product, 
    }); 
    }; 
} 

Về cơ bản bạn sẽ có được tất cả các dữ liệu bạn cần hành động trên, sau đó bạn có thể gửi dữ liệu đó để giảm tốc của bạn.

Chúc may mắn!

Answer 2

Khi gửi một hành động, bạn có thể chuyển một tham số. Trong trường hợp này, bạn có thể vượt qua accountDetails.stateOfResidenceId để thực hiện hành động và sau đó chuyển nó vào bộ giảm tốc dưới dạng tải trọng.

Answer 3

Tùy chọn của bạn là viết logic hơn ngoài việc chỉ sử dụng combineReducers hoặc bao gồm nhiều dữ liệu hơn trong hành động. Câu hỏi thường gặp về Redux đề cập đến chủ đề này: http://redux.js.org/docs/faq/Reducers.html#reducers-share-state.

Ngoài ra, tôi hiện đang làm việc trên một bộ trang mới cho tài liệu Redux về chủ đề "Cấu trúc Hộp số", mà bạn có thể thấy hữu ích. Các trang WIP hiện tại là https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md.

Answer 4

Tôi khuyên bạn nên chuyển nó vào trình tạo tác vụ. Vì vậy, một nơi nào đó bạn sẽ có một người sáng tạo hành động mà làm điều gì đó như thế này:

updateProduct(arg1, arg2, stateOfResidenceId) { 
    return { 
    type: UPDATE_PRODUCT, 
    stateOfResidenceId 
    } 
} 

Tại nơi mà bạn kích hoạt các hành động, giả sử bạn đang sử dụng phản ứng, bạn có thể sử dụng

function mapStateToProps(state, ownProps) { 
    return { 
    stateOfResidenceId: state.accountdetails.stateOfResidenceId 
    } 
} 

và kết nối thành phần phản ứng của bạn bằng cách sử dụng kết nối của phản ứng-redux.

connect(mapStateToProps)(YourReactComponent); 

Lúc này, trong phản ứng thành phần mà bạn kích hoạt các updateProduct hành động, bạn nên có stateOfResidenceId như một chỗ dựa, và bạn có thể vượt qua nó để tạo hành động của bạn.

Nghe có vẻ phức tạp, nhưng nó thực sự là về sự tách biệt các mối quan tâm.

Answer 5

Bạn có thể cố gắng sử dụng:

redux-named-reducers

nào cho phép bạn để có được trạng thái bất cứ nơi nào trong mã của bạn như sau:

const localState1 = getState(reducerA.state1) 
const localState2 = getState(reducerB.state2)