I have seen conflicting (or just confusing, to me) answers in other questions here regarding whether using getState
within an action is acceptable, or not, and I have seen quite a few times it being called an anti-pattern. For me, it seems to work great but what is the best practice for doing this if we are not to use getState
?
I am using getState
within a thunk to filter through an array of users that is currently connected to some mock data and being pulled into the state of the application.
Here is the code for my action:
export const accountLogInSuccess = user => ({
type: types.ACCOUNT_LOG_IN_SUCCESS,
user,
});
export const accountLogOutSuccess = () => ({
type: types.ACCOUNT_LOG_OUT_SUCCESS,
});
export const accountCheckSuccess = () => ({
type: types.ACCOUNT_CHECK_SUCCESS,
});
export const accountCheck = () => (
(dispatch, getState) => {
dispatch(ajaxCallBegin());
return apiAccount.accountCheck().then((account) => {
if (account) {
const user = findByUID(getState().users, account.uid);
dispatch(accountLogInSuccess(user));
toastr.success(`Welcome ${user.nameFirst}!`);
} else {
dispatch(accountLogOutSuccess());
}
dispatch(accountCheckSuccess());
}).catch((error) => {
dispatch(ajaxCallError(error));
toastr.error(error.message);
throw (error);
});
}
);
And my reducer:
export default function reducerAccount(state = initial.account, action) {
switch (action.type) {
case types.ACCOUNT_LOG_IN_SUCCESS:
return Object.assign({}, state, action.user, {
authenticated: true,
});
case types.ACCOUNT_LOG_OUT_SUCCESS:
return Object.assign({}, {
authenticated: false,
});
case types.ACCOUNT_CHECK_SUCCESS:
return Object.assign({}, state, {
initialized: true,
});
default:
return state;
}
}
The initial state of account used in my reducer is just:
account: {
initialized: false,
authenticated: false,
},
The accountCheck
action passes the user (found using getState
and the findByUID
function) into accountLogInSuccess
where the reducer adds its values to the current state of account via Object.assign
.
Preferring to not have to get the user at the root of my application and then passing it down via props, what is the best practice to accomplish this within Redux and having the user data be available in state? Again, using getState
within the thunk works great for me thus far, but is there a better solution to this that is not considered an anti-pattern?