zzdjk6 / redux-thunk-routine

Less Boilerplate, More Static Typing Support With Redux-Thunk

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compatibility with redux-toolkit

varemenos opened this issue · comments

What is the recommended way of using this alongside redux-toolkit?

I just started investigating whether it's easy/possible to integrate this in a new project I'm working on that uses redux-toolkit and I was wondering if you gave it a thought.

I've been trying to get something like this to work but the only way possible is through this:

const helloWorldSlice = createSlice({
  name: 'helloWorld',
  initialState: initialState,
  extraReducers: {
    [fetchDataRoutine.REQUEST](state, action: PayloadAction<any>) {
      console.log(action)
      // do stuff
      return state
    },
})

Hi @varemenos ,

Sorry for the late reply and apologize for not having real-world experience with redux-toolkit as my current projects are not using it.

After going through their documentation, I think the code you posted seems to be the most viable way to use them together at the moment.

Apart from that, you probably could use something like below to infer the type of Action generated by routine:

const helloWorldSlice = createSlice({
  name: 'helloWorld',
  initialState: {},
  reducers: {},
  extraReducers: {
    [fetchDataRoutine.SUCCESS](state: State, action: ReturnType<typeof fetchDataRoutine.success>) {
      console.log(action);
      // do stuff
      return state;
    }
  }
});