Using a callback with useReducer / Redux reducers - reactjs

Question

I've been looking for a solution to "promisify" useReducer do something once I'm sure that the state has been changed as per my dispatched action. I found some promising stuff, such as this feature request and a few solutions similar to this one that's based on combining useReducer with useEffect. So instead of using a promise, I've tried to use a callback instead and I want to note here that this implementation works. But I'm unsure if there are any drawbacks to this.
**Note, the use case here isn't to call a function per every time the state changes, but rather the option to do something when the reducer finishes processing an action.
As per Redux rules, my reducer does not mutate state.
const emptyState: IState = {
str: '',
obj: {
propA: 0,
propB: 0,
}
}
interface ReducerActions {
type: 'changeStr' | 'changeObj';
callback?: (newState: IState) => any;
}
const reducer = (state: IState, action: ReducerActions): IState => {
let newState = {...state};
switch(action.type) {
case 'changeStr':
newState.str = action.newStr;
break;
case 'changeObj':
newState.obj = action.newObj;
break;
if (action.callback) {
action.callback(newState);
}
return newState;
}
I did notice that this works in reverse of the traditional flow, where the callback or promise is executed after the state has changed, but should it matter when the callback is called using the value of the new state anyways?
And, are there any drawbacks or side-effects of using this method (whether here or in a Redux implementation)?

Answer 1

the action changeStr replaces the string of state.str with a new string, using 2 buttons, one makes it longer, the other shorter. If I use useEffect, I can of course check the new value of the string and get the length, but I would not be able to get the length of the previous string without storing the previous value. If I pass a callback to the action implemented in the buttons, I know which button makes it longer and which one makes it shorter.
Still not sure what your needs are but if you need the previous and current value to perform some logic you can write a custom hook:
const { useReducer, useState, useRef } = React;
const init = { value: 'A' };
const TOGGLE = 'TOGGLE';
const toggle = () => ({ type: TOGGLE });
const reducer = (state, { type }) => {
//toggle state.value between A and B
if (type === TOGGLE) {
return { value: state.value === 'A' ? 'B' : 'A' };
}
return state;
};
const selectValue = (state) => state.value;
const NONE = {};
//custom hook to detect changes between renders
const useChange = (value, callback) => {
const ref = useRef(NONE);
if (ref.current !== value) {
if (ref.current !== NONE) {
callback(ref.current, value);
}
ref.current = value;
}
};
const App = () => {
const [state, dispatch] = useReducer(reducer, init);
const [message, setMessage] = useState('');
const value = selectValue(state);
useChange(value, (pref, current) =>
setMessage(`value changed from ${pref} to ${current}`)
);
return (
<div>
<button onClick={() => dispatch(toggle())}>
toggle
</button>
<div>{value}</div>
<div>{message}</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
UPDATE
Example of using thunk with useReducer:
const { useReducer, useRef } = React;
const init = { value: 'A' };
const TOGGLE = 'TOGGLE';
const thunkToggle = () => (dispatch, getState) => {
const value = getState().value;
//you can do async dispatch
setTimeout(() => {
dispatch({ type: TOGGLE });
console.log(
`action dispatched value was ${value} is now ${
getState().value
}`
);
}, 10);
console.log(`value is now (nothing dispatched) ${value}`);
};
const reducer = (state, { type }) => {
console.log(`in reducer action type: ${type}`);
//toggle state.value between A and B
if (type === TOGGLE) {
return { value: state.value === 'A' ? 'B' : 'A' };
}
return state;
};
const SET_STATE = Date.now();
//custom hook to detect changes between renders
const useThunkReducer = (reducer, initialState) => {
const state = useRef(initialState);
const thunkReducer = (state, action) => {
if (action.type === SET_STATE) {
return action.payload;
}
return reducer(state, action);
};
const [rState, dispatch] = useReducer(thunkReducer, init);
const thunkDispatch = (action) => {
if (typeof action === 'function') {
return action(thunkDispatch, () => state.current);
}
state.current = thunkReducer(state.current, action);
dispatch({ type: SET_STATE, payload: state.current });
};
return [rState, thunkDispatch];
};
const App = () => {
const [state, dispatch] = useThunkReducer(reducer, init);
return (
<div>
<button onClick={() => dispatch(thunkToggle())}>
toggle
</button>
<pre>{JSON.stringify(state, undefined, 2)}</pre>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
For completion; here is an example using middleware so you can add several middleware functions and not only thunk:
const { useRef, useState } = React;
const compose = (...fns) =>
fns.reduce((result, fn) => (...args) =>
fn(result(...args))
);
const mw = () => (next) => (action) => next(action);
const createMiddleware = (...middlewareFunctions) => (
store
) =>
compose(
...middlewareFunctions
.concat(mw)
.reverse()
.map((fn) => fn(store))
);
const useMiddlewareReducer = (
reducer,
initialState,
middleware = () => (b) => (c) => b(c)
) => {
const stateContainer = useRef(initialState);
const [state, setState] = useState(initialState);
const dispatch = (action) => {
const next = (action) => {
stateContainer.current = reducer(
stateContainer.current,
action
);
return setState(stateContainer.current);
};
const store = {
dispatch,
getState: () => stateContainer.current,
};
return middleware(store)(next)(action);
};
return [state, dispatch];
};
//middleware
const thunkMiddleWare = ({ getState, dispatch }) => (
next
) => (action) =>
typeof action === 'function'
? action(dispatch, getState)
: next(action);
const logMiddleware = ({ getState }) => (next) => (
action
) => {
console.log('in log middleware', action, getState());
Promise.resolve().then(() =>
console.log('after action:', action.type, getState())
);
return next(action);
};
const init = { value: 'A' };
const TOGGLE = 'TOGGLE';
const thunkToggle = () => (dispatch) => {
setTimeout(() => {
dispatch({ type: TOGGLE });
}, 500);
};
const reducer = (state, { type }) => {
console.log(`in reducer action type: ${type}`);
//toggle state.value between A and B
if (type === TOGGLE) {
return { value: state.value === 'A' ? 'B' : 'A' };
}
return state;
};
const middleware = createMiddleware(
thunkMiddleWare,
logMiddleware
);
const App = () => {
const [state, dispatch] = useMiddlewareReducer(
reducer,
init,
middleware
);
return (
<div>
<button onClick={() => dispatch(thunkToggle())}>
toggle
</button>
<pre>{JSON.stringify(state, undefined, 2)}</pre>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>