在 Reducer 中保存设置并从另一个 Reducer 访问它们？

Question

I have a settings reducer:

state = {
    fontSize: 30,
    fontWeight: 400,
    ...etc.
  },

I have a different reducer, which needs access to the fontSize of the settings-reducer. I don't know now how to access this state now. What would be an easy & viable solution?

Answer 1

Based on my understanding through comments,

You can achieve what you need as below

• Keep the initial state fontSize value in both the reducers.
• Whenever user updates fontSize of settings reducer by an action , have an another action dispatched with the same value of fontSize to update your article reducer and to calculate new value out of it (You can store it with a different name in article reducer depends on your requirement)
• Now you will be having updated fontSize in settings reducer as per user update, new calculated value based on the updated fontSize in article reducer along with the original (initial) fontSize .

// Assuming you are using thunk middleware

// While dispatching action for fontSize update
updateFontSize (fontSize) {
  return dispatch => {
    dispatch({type: UPDATE_FONT_SIZE, fontSize});
    dispatch({type: GET_UPDATED_FONT_SIZE, fontSize});
  }
}


// settingsReducer.js
const initialState = {
  fontSize: 30,
  fontWeight: 400,
  ...
}

reducer (state = initialState, action) {
  switch(action.type) {
    case UPDATE_FONT_SIZE:
      return {...state, fontSize: action.fontSize};
  ...
}


// articleReducer.js
const initialState = {
  fontSize: 30,
  ...
}

reducer(state = initialState, action) {
  switch(action.type) {
    case GET_UPDATED_FONT_SIZE: // Different action, with different data update based on fontSize
      return {...state, additionalValue: (action.fontSize / 2)};
  ...
}