Understand React-Redux Toolkit Syntax?

Question

I'm new to react, redux and tyring to understand the redux-toolkit tutorial i follow. I have the slice as follows.

const initialState = {
  count: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;

export const incrementTest = () => (dispatch) => {
  dispatch(increment());
};

Then I use that incrementTest action as follows

<button onClick={() => dispatch(incrementTest())}> + </button>

I want to understand following.

In following fuction

export const incrementTest = () => (dispatch) => {
      dispatch(increment());
    };

we return a function which takes argument as dispatch then call that provided dispatch function with argement of another function increment which is defined above and exported.

However when we call this function we use dispatch(incrementTest()) providing incrementTest as a param to dispatch. I don't understand this concept . Which concept in javascript should i further study to learn this ?

Also increment reducer take state as parameter ( and action also in some cases ). Who provide this (state,action) to this function as we call it as dispatch(incrementTest())

Answer 1

So this:

export const incrementTest = () => (dispatch) => {
  dispatch(increment());
};

is an example for a thunk, a function that gets called (by a redux middleware) with two arguments, dispatch and getState. It is typically used to coordinate async work since you can await stuff inside the function or deal with promises. Look up the thunk middleware if you want to know more. I'm not sure why they made this action a thunk, there's no need for it, maybe testing.

To your second question, the library does. All you do is call dispatch() with an action, the library calls the reducer function with the current state and your action. Think of it as emitting an event. Your job is to create the event, the library takes care of updating the global state accordingly. The reducer is written declaratively, sort of. As in "how would the global state need to change if that specific event happened?".

Answer 2

In Redux-Toolkit, the createSlice method helps us create a slice of the redux-store. This function aims to reduce the boilerplate required to add data to redux in the canonical way. Internally, it uses createAction and createReducer.

createSlice looks at all the functions that are defined in the reducers field and for every case generates an action creator that uses the name of the reducer as the action type itself.

In the above code, the increment reducer created above became an action type of counter/increment, and the increment() action creator will return an action with that type.

Now all the reducers in reducers object in createSlice has access to the state and you can also manipulate the state from there.