Vfrdtyky

I have two reducers which share some actions. Issue is when i dispatch action on one screen it triggers action on the other screen. Boths screen are in a TabNavigator therefore I can easily see that if I change a field on 1 screen the same field is changed on the other screen as well.

Reducer 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;

Reducer 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;

Store

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;

As you can see there are some common actions like CHANGE_EMAIL_INPUT & CHANGE_PASSWORD_INPUT and I dont want them to be triggered together. One way I can figure out is to change the name of actions and make then more specific to screen but this doesn't sound good. Another could be to wrap reducers so that we know what is being called but not getting an idea on the wrapper.

Any suggestions.

You should not reuse the same action name between 2 reducers, to avoid unintended effects, use different names.

For example

Actions.SIGNUP_ CHANGE_EMAIL_INPUT
and
Actions.SIGNIN_ CHANGE_EMAIL_INPUT

Otherwise, you can merge your 2 reducers, adding a state to know from which screen this change emerged.

well, i solved it by creating a wrapper for the reducers.

Store

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'),

});

Screen

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