How to use React redux hooks for updating state for just 1 value on click

Question

I'm fairly new to React Redux and am using it to display different transactions on a page. I have set up my store, then created my reducer & selector.

I have a filter state that is controlled by 3 buttons that when clicked, should change the type ('incoming', 'outgoing' or 'trades') and this renders different components based on this change.

Where I seem to be going wrong, is with updating the Redux value on click and ensuring the state also updates, I'm sure its an easy fix but haven't quite figured it out.

This is my reducer:

import {createSlice} from "@reduxjs/toolkit";

export const initialState = {
    filter_type: "outgoing",
}

const slice = createSlice({
    initialState,
    name: "transactionFilter",
    reducers: {
        setFilterType: (state, {payload}) => {
            state.filter_type = payload
        }
    }
})

const { reducer, actions } = slice;
export const { setFilterType } = actions;
export default reducer;

And my selector:

import {createSelector} from "@reduxjs/toolkit";
const baseState = (state) => state.transaction_filter;

export const transactionFilterSelector = createSelector(
    [baseState],
    (state) => state.filter_type
)

I'm importing the selector along with useDispatch/useSelector and can see the Redux state in my console.log, how can I use dispatch correctly to update everything?

This is my transaction file:

import React, {useMemo, useEffect, useState} from "react"
import {useDispatch, useSelector} from "react-redux";



const TransactionsPage = (props) => {

    const filterState = useSelector(transactionFilterSelector);

    console.log('Redux filter state: ', filterState);

    const dispatch = useDispatch();
    
    const [filter, setFilter] = useState({
        type: filterState,
        sources: {
            type: "all",
            items: []
        },
        assets: [],
        dates: {
            type: "all",
            from: "",
            to: "",
        },
        category: "all",
    })

return (
      <div>
        <Heading level={'4'}>Choose a type</Heading>
        <div className={'tx-type-filter'}>
          {Object.values(TxTypes).map((i) => (
            <div
              className={`tx-type-item ${type === i ? 'selected' : ''}`}
              key={i}
              onClick={() => {
                  dispatch({type: setFilterType, payload: i});
                }}>
              <img src={image(i)} alt={'tx type'} />
            </div>
          ))}
        </div>
      </div>
)

export default TransactionsPage;
    

Thank you in advance for any guidance!

Answer 1

You'd do dispatch(setFilterType(i));. You don't write out action objects in modern Redux.