具有相同操作的减速器会影响多个屏幕

Question

我有两个减速器，它们共享一些操作。问题是当我在一个屏幕上调度操作时，它会触发另一个屏幕的操作。Boths屏幕在TabNavigator中，因此我可以很容易地看到，如果我在一个屏幕上更改一个字段，那么在另一个屏幕也会更改相同的字段。

减速器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}) },