3 ms·
Hi, I maintain Redux and created RTK. I'm going to do my best @davidkpiano impression and point out that "Redux, as typically used, is _half_ a state machine"
by acemarke 3y ago
Hi, I maintain Redux and created RTK.
I'm going to do my best @davidkpiano impression and point out that "Redux, as typically used, is _half_ a state machine" [0] , in that a typical reducer responds to actions regardless of what the current state value might be, whereas a true Finite State Machine always checks the current state first before deciding if the current event is relevant.
You _can_ absolutely write Redux reducers as true state machines. With `createSlice`, you'd generally need to have a field in the slice that's some kind of enum, and check that first inside of a reducer:
const someSlice = createSlice({
name,
initialState: {status: "x", someData},
reducers: {
somethingHappened(state, action) {
if(state.status === "x") {
// _now_ consider if the "somethingHappened" action is relevant
}
}
}
})
Very doable, but not the most ideal syntax, since `createSlice` is focused on "here's an action / thing that happened, here's the reducer that handles that".
On the flip side, you can also use XState state machines as Redux reducers. A state machine is, after all, a function that takes a current state value + some event, and returns a new state.... exactly the same as a reducer function!
David and I have been saying for a while that we'd like to have a more official integration between XState and Redux. A while back, Matt Pocock put together an proof of concept for what a `createXStateSlice` might look like [1]. I actually sat down with David a couple weeks ago and we did some further design discussions about the possibility of using the `@xstate/fsm` package (a smaller version of XState's logic) as a starting point, and generating RTK actions based on that. No code yet, but it seems feasible.
[0] https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1hd7 https://dev.to/davidkpiano/redux-is-half-of-a-pattern-1-2-1h...
[1] https://github.com/mattpocock/redux-xstate-poc https://github.com/mattpocock/redux-xstate-poc
- komali2 3y agoThat's pretty awesome news regarding your conversations. I hadn't even thought of the `reducers` slice property. I meant more all the thunky features around the `endpoints` property and the hooks that are autogenerated as a result. In our components this meant we could have for example a form that takes an api model as input and can modify that model on submit. So like, ...component boilerplate const { data, isLoading, isFetching, isError, isSuccess, } = useGetSomeDataQuery(); const [updateData, { isLoading, isUninitialized, isSuccess, isError }] = useSomeDataMutation(); And then right there is all the state we really need to worry about for a given form as we interact with the API. Though again the missing bits are the stuff managed by Formik, like changed but unsubmitted inputs and etc, but those definitions would also be up top near the RTK stuff and so at least while editing it's visually available. Like you said doesn't necessarily pass muster as an actual state machine unless you have lots of checks in your useEffects or wherever else you're reacting to state changes about the entire state of the component.