title: How to dispatch action when a state changes in redux toolkit without using useEffect?
body: <p>If I want to dispatch an action whenever a piece of state changes, currently how I do this is by listening to that state inside a component <code>useEffect</code> hook and dispatching an action whenever that state changes.</p>
  <p>For example, let's say I have the following slice:</p>
  <pre><code>export const updateBar = createAsyncThunk(&quot;mySlice/updateBar&quot;, async () =&gt; {
    const { data } = await axios.get(&quot;/some/api&quot;);
    return data;
  });
  
  const mySlice = createSlice({
    name: &quot;mySlice&quot;,
    initialState: {
      foo: false,
      bar: 0,
    },
    reducers: {
      updateFoo: (state, { payload }) =&gt; {
        state.foo = payload;
      },
    },
    extraReducers: {
      [updateBar.fulfilled]: (state, { payload }) =&gt; {
        state.bar = payload;
      },
    },
  });
  </code></pre>
  <p>Now if I want to update <code>bar</code> whenever <code>foo</code> changes, I have to go to the component side to add the following code:</p>
  <pre><code>const Component = () =&gt; {
    const foo = useSelector((state) =&gt; state.mySlice.foo);
  
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(updateBar());
    }, [dispatch, foo]);
  
    return &lt;div&gt;&lt;/div&gt;;
  };
  </code></pre>
  <p>I am wondering is it possible to call <code>updateBar</code> whenever <code>foo</code> changes within the redux slice and without having to touch the component side, because I think that it would be cleaner if all state side effects are abstracted away from the component.</p>