3 ms·

With the useReducer hook a lot of these differences have gone away. The important difference is that redux will use global state. It's use of the Context API ma

• tracker1 7y ago
  I find where redux shines is when you move past the trivial app (which TODO mvc style apps are). Especially if you're sharing various portions of state between components at different levels and routes. You have hooks for redux too, the following is at the top of pretty much all my main components. import { useSelector } from 'react-redux'; import useActions from './ComponentActions'; In my *Actions file, I export a wrapper for the actions individually, which makes using actions pretty straight forward... import { bindActionCreators } from 'redux'; import { useDispatch } from 'react-redux'; import { useMemo } from 'react'; ... export default deps => { const dispatch = useDispatch(); return useMemo( () => bindActionCreators( { someAction, anotherAction, ... }, dispatch ), deps ? [dispatch, ...deps] : [dispatch] ); }; I also rely pretty heavily on redux-thunk, which lets me do simple workflows for async... export const someAction = (input1, input2) => async (dispatch, getState) => { try { dispatch(someActionStart()); const result = await api.area.someCall(input1, input2); dispatch(someActionComplete(getState(), result)); } catch(error) { dispatch(someActionError(getState(), error); } } I'd probably use saga if I ever needed anything much more complicated, which is rarely the case. In general, I tend to feel that following a few consistent patterns with Redux tends to let you avoid a lot of problem cases dealing with state compared to other options. Also, I tend to inject an intercept into my root reducer, this way I can force dispatch a starting state for purposes of integrated browser testing (gets deep-merged with current state). beforeEach(async () => { base = await page.evaluate(() => { // set store to a different initial state __STORE__.dispatch({ type: '__TEST_OVERRIDE__', payload: startingState }); ... return __BASE__; // <-- injected configuration via server }); ...