如何使用redux-toolkit动态更改基本URL？

npm install redux redux-thunk @reduxjs/toolkit

import { configureStore, createSlice } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';

const initialState = {
  baseUrl: 'https://example.com/api' // 初始的基本URL
};

const urlSlice = createSlice({
  name: 'url',
  initialState,
  reducers: {
    setBaseUrl: (state, action) => {
      state.baseUrl = action.payload; // 设置新的基本URL
    }
  }
});

export const { setBaseUrl } = urlSlice.actions;

const store = configureStore({
  reducer: {
    url: urlSlice.reducer
  },
  middleware: [thunk]
});

export default store;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';

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

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { setBaseUrl } from './store/urlSlice';

const UrlForm = () => {
  const [newUrl, setNewUrl] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(setBaseUrl(newUrl)); // 发起更新基本URL的action
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newUrl}
        onChange={(event) => setNewUrl(event.target.value)}
      />
      <button type="submit">更新基本URL</button>
    </form>
  );
};

export default UrlForm;