Jak uzyskać dostęp do stanu wewnątrz reduktora Redux?

Question

Mam reduktor iw celu obliczenia nowego stanu potrzebuję danych z akcji, a także danych z części stanu, która nie jest zarządzana przez ten reduktor. W szczególności w reduktorze, który pokażę poniżej, potrzebuję dostępu do pola 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 (reduktor główny):

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

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

export default rootReducer; 

Jak mogę uzyskać dostęp do tego pola?

Answer 1

użyłbym thunk dla tego, oto przykład:

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

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

Zasadniczo można uzyskać wszystkie potrzebne dane na temat działań, można wysłać te dane do reduktora.

Powodzenia!

Answer 2

Podczas wywoływania akcji można przekazać parametr. W takim przypadku można przekazać akcję accountDetails.stateOfResidenceId, a następnie przekazać ją do reduktora jako ładunek.

Answer 3

Twoje opcje polegają albo na napisaniu większej logiki oprócz samego użycia combineReducers, albo na dodaniu większej ilości danych w akcji. Redux FAQ obejmuje ten temat: http://redux.js.org/docs/faq/Reducers.html#reducers-share-state.

Ponadto obecnie pracuję nad nowym zestawem stron do dokumentów Redux na temat "Structuring Reducers", które mogą okazać się pomocne. Aktualne strony WIP są na https://github.com/markerikson/redux/blob/structuring-reducers-page/docs/recipes/StructuringReducers.md.

Answer 4

Sugeruję, aby przekazać go twórcy akcji. Więc gdzieś będziesz miał twórca działania, który robi coś takiego:

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

W miejscu, gdzie można wywołać działanie załóżmy używasz reagować, można użyć

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

i połączyć do komponentu reagującego za pomocą połączenia react-redux.

connect(mapStateToProps)(YourReactComponent); 

Teraz, w swojej reagować składnik, gdzie można wyzwolić updateProduct działania, należy mieć stateOfResidenceId jako rekwizyt, można przekazać je do swojego twórcy akcji.

Brzmi zawiło, ale tak naprawdę chodzi o rozdzielenie obaw.

Answer 5

Można spróbować użyć:

redux-named-reducers

który pozwala uzyskać stan nigdzie w kodzie tak:

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