Answer a question

Fairly new to redux, react-redux, and redux toolkit, but not new to React, though I am shaky on hooks. I am attempting to dispatch an action from the click of a button, which will update the store with the clicked button's value. I have searched for how to do this high and low, but now I am suspecting I am thinking about the problem in React, without understanding typical redux patterns, because what I expect to be possible is just not done in the examples I have found. What should I be doing instead? The onclick does seem to capture the selection, but it is not being passed to the action. My goal is to show a dynamic list of buttons from data collected from an axios get call to a list of routes. Once a button is clicked, there should be a separate call to an api for data specific to that clicked button's route. Here is an example of what I currently have set up:

reducersRoutes.js

import { createSlice } from "@reduxjs/toolkit";
import { routesApiCallBegan } from "./createActionRoutes";

const slice = createSlice({
    name: "routes",
    initialState: {
        selected: ''
    },
{... some more reducers...}

        routeSelected: (routes, action) => {
            routes.selected = action.payload;
        }
    },
});

export default slice.reducer;

const { routeSelected } = slice.actions;

const url = '';

export const loadroutes = () => (dispatch) => {
    return dispatch(
        routesApiCallBegan({
            url,
{...}
            selected: routeSelected.type,
        })
    );
};

createActionRoutes.js

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

{...some other actions...}
export const routeSelected = createAction("routeSelection");

components/routes.js:

import { useDispatch, useSelector } from "react-redux";
import { loadroutes } from "../store/reducersRoutes";
import { useEffect } from "react";
import { routeSelected } from "../store/createActionRoutes";
import Generic from "./generic";


const Routes = () => {
    const dispatch = useDispatch();
    const routes = useSelector((state) => state.list);
    const selected = useSelector((state) => state.selected);
useEffect(() => {
    dispatch(loadroutes());
}, [dispatch]);

const sendRouteSelection = (selection)  => {
    dispatch(routeSelected(selection))
}

return (
    <div>
        <h1>Available Information:</h1>
        <ul>
            {routes.map((route, index) => (
               <button key={route[index]} className="routeNav" onClick={() => sendRouteSelection(route[0])}>{route[1]}</button>
            ))}
        </ul>
        {selected !== '' ? <Generic /> : <span>Data should go here...</span>}
    </div>
);
};

export default Routes;

Would be happy to provide additional code if required, thanks!

ETA: To clarify the problem - when the button is clicked, the action is not dispatched and the value does not appear to be passed to the action, even. I would like the selection value on the button to become the routeSelected state value, and then make an api call using the routeSelected value. For the purpose of this question, just getting the action dispatched would be plenty help!

Answers

After writing that last comment, I may actually see a couple potential issues:

First, you're currently defining two different action types named routeSelected:

• One is in the routes slice, generated by the key routeSelected
• The other is in createActionRoutes.js, generated by the call to createAction("routeSelection").

You're importing the second one into the component and dispatching it. However, that is a different action type string name than the one from the slice - it's just 'routeSelection', whereas the one in the slice file is 'routes/routeSelected'. Because of that, the reducer logic in the slice file will never run in response to that action.

I don't think you want to have that separate createAction() call at all. Do export const { routeSelected } = slice.actions in the slice file, and dispatch that action in the component.

I'm also a little concerned about the loadroutes thunk that you have there. I see that you might have omitted some code from the middle, so I don't know all of what it's doing, but it doesn't look like it's actually dispatching actions when the fetched data is retrieved.

I'd recommend looking into using RTK's createAsyncThunk API to generate and dispatch actions as part of data fetching - see Redux Essentials, Part 5: Async Logic and Data Fetching for examples of that.