Редукторы с одинаковым действием воздействуют на несколько экранов

Question

У меня есть два редуктора, которые разделяют некоторые действия.Проблема в том, что когда я отправляю действие на одном экране, оно вызывает действие на другом экране.Оба экрана находятся в TabNavigator, поэтому я легко вижу, что если я изменяю поле на 1 экране, то же поле изменяется и на другом экране.

Редуктор 1

import * as Actions from '../actions/Types';   
const initialState = {
  email: '',
  password: ''
};  
const signInReducer = (state = initialState, action) => {
  switch(action.type) {
    case Actions.CHANGE_EMAIL_INPUT:
     return Object.assign({}, state,  
                { email: action.email }
            );
    case Actions.CHANGE_PASSWORD_INPUT:
      return Object.assign({}, state,  
              { password: action.password }
          );
    default:
      return state;
  }
}
export default signInReducer;

Редуктор 2

import * as Actions from '../actions/Types';
const initialState = {
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  repeatPassword: ''
};
const signUpReducer = (state = initialState, action) => {
  switch(action.type) {
  case Actions.CHANGE_FIRST_NAME_INPUT:
     return Object.assign({}, state,  
                { firstName: action.firstName }
            );
    case Actions.CHANGE_LAST_NAME_INPUT:
      return Object.assign({}, state,  
              { lastName: action.lastName }
          );
    case Actions.CHANGE_EMAIL_INPUT:
     return Object.assign({}, state,  
                { email: action.email }
            );
    case Actions.CHANGE_PASSWORD_INPUT:
      return Object.assign({}, state,  
              { password: action.password }
          );
    case Actions.CHANGE_REPEAT_PASSWORD_INPUT:
      return Object.assign({}, state,  
              { repeatPassword: action.password }
          );
    default:
      return state;
  }
}
export default signUpReducer;

Магазин

import { createStore, combineReducers } from 'redux';
import signInReducer from '../reducers/SignIn';
import signUpReducer from '../reducers/SignUp';
import profileReducer from '../reducers/Profile'; 
const rootReducer = combineReducers({
   signIn: signInReducer,
   signUp: signUpReducer,
   profile: profileReducer
});

const configureStore = () => {
  return createStore(rootReducer);
}  
export default configureStore;

Как видите, есть некоторые общие действия, такие как CHANGE_EMAIL_INPUT & CHANGE_PASSWORD_INPUT и я не хочу, чтобы они запускались вместе.Один из способов, который я могу выяснить, - это изменить название действий и сделать их более специфичными для экрана, но это звучит не очень хорошо.Другой может заключаться в том, чтобы обернуть редукторы, чтобы мы знали, что вызывается, но не понимали обертку.

Любые предложения.

Answer 1

Вы не должны повторно использовать одно и то же имя действия между двумя редукторами, чтобы избежать непреднамеренных эффектов, используйте разные имена.

Например

Actions.SIGNUP_ CHANGE_EMAIL_INPUT и Actions.SIGNIN_ CHANGE_EMAIL_INPUT

В противном случае вы можете объединить 2 редуктора, добавив состояние, чтобы узнать, с какого экрана появилось это изменение.

Answer 2

Ну, я решил это, создав оболочку для редукторов.

Магазин

function createNamedWrapperReducer(reducerFunction, reducerName) {
  return (state, action) => {
      const isInitializationCall = state === undefined;
      const shouldRunWrappedReducer = reducerName(action) || isInitializationCall;
      return shouldRunWrappedReducer ? reducerFunction(state, action) : state;
  }
}

const rootReducer = combineReducers({
  //  signIn: signInReducer,
  //  signUp: signUpReducer,
  //  profile: profileReducer
  signIn: createNamedWrapperReducer(signInReducer, action => action.name === 'signIn'),
  signUp: createNamedWrapperReducer(signUpReducer, action => action.name === 'signUp'),
  profile: createNamedWrapperReducer(profileReducer, action => action.name === 'profile'),
});

Экран

onChangeEmail: (email) => { dispatch({name: 'signIn', type: Actions.CHANGE_EMAIL_INPUT, email: email}) },