Save userId using React Redux Toolkit

To save userId using React Redux Toolkit in TypeScript, you can follow these steps:

Set up your Redux store with Redux Toolkit:
First, you’ll need to install the required dependencies if you haven’t already:
```
npm install @reduxjs/toolkit react-redux
```

Create a slice for the user state:

Create a new file userSlice.ts for the user state slice.

// src/features/user/userSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface UserState {
  userId: string | null;
}

const initialState: UserState = {
  userId: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUserId(state, action: PayloadAction<string>) {
      state.userId = action.payload;
    },
    clearUserId(state) {
      state.userId = null;
    },
  },
});

export const { setUserId, clearUserId } = userSlice.actions;
export default userSlice.reducer;

Configure the Redux store:

Configure your Redux store by combining the user slice reducer.

// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/user/userSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

Set up the provider in your main application file:

Wrap your application with the Redux provider.

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Create a component to use the user state and dispatch actions:

Here’s an example component that uses the user state and dispatches actions to set and clear the userId.

// src/components/UserComponent.tsx
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../app/store';
import { setUserId, clearUserId } from '../features/user/userSlice';

const UserComponent: React.FC = () => {
  const dispatch = useDispatch();
  const userId = useSelector((state: RootState) => state.user.userId);
  const [inputUserId, setInputUserId] = useState('');

  const handleSetUserId = () => {
    dispatch(setUserId(inputUserId));
  };

  const handleClearUserId = () => {
    dispatch(clearUserId());
  };

  return (
    <div>
      <h1>User ID: {userId}</h1>
      <input
        type="text"
        value={inputUserId}
        onChange={(e) => setInputUserId(e.target.value)}
      />
      <button onClick={handleSetUserId}>Set User ID</button>
      <button onClick={handleClearUserId}>Clear User ID</button>
    </div>
  );
};

export default UserComponent;

Use the component in your application:

Finally, use the UserComponent in your application.

// src/App.tsx
import React from 'react';
import UserComponent from './components/UserComponent';

const App: React.FC = () => {
  return (
    <div>
      <UserComponent />
    </div>
  );
};

export default App;

This setup allows you to manage the userId state using Redux Toolkit in a TypeScript React application.

Related