reactjs - Cum să ai combineReducers și reducători personalizați în Redux?


În prezent, toate reducer-ele mele au nevoie doar de datele din valoarea lor din stare, așa că 'rootReducer' arată astfel

export const appReducer = combineReducers({ foo: fooReducerFunction, bar: barReducerFunction})

ceea ce este în regulă, dar acum am un reducer care are nevoie de alte părți ale stării, și știu că se poate face așa

export function App(state: AppState, action: AppActions): AppState {
    return {
       foo: fooReducerFunction(state.foo, action),
       bar: fooReducerFunction(state.bar, action),
       baz: bazReducerFunction({foo: state.foo, bar: state.bar}, action)
    } 
}

dar nu vreau să trebuiască să scriu explicit toți ceilalți reducători așa cum am făcut cu foo și bar când doar o parte a magazinului meu are nevoie de alte părți ale magazinului. Există vreo modalitate de a combina reducători personalizați și combineReducers într-un mod de genul acesta?

const appReducer = combineReducers({ foo: fooReducerFunction, bar: barReducerFunction})

export function App(state: AppState, action: AppActions): AppState {
    return {
       ...appReducer,
       baz: bazReducerFunction({foo: state.foo, bar: state.bar}, action)
    } 
}

Răspuns #1

Este posibil să combini reducer-ele în acest fel, dar o soluție mai simplă la problema ta este să iei o captură a magazinului redux în acțiunea ta și să transmiți segmentul de stare de care ai nevoie reducer-ului tău la momentul dispatch-ului. Dacă folosești redux-thunk, de exemplu, următorul model ar trebui să funcționeze:

export const actionFoo = (data) =>  {
  return (dispatch, getState) => {
    // access slice of state first
    const { otherStateSlice } = getState()
    dispatch({ type: UPDATE_DATA, otherStateSlice, data })
  }
}